Web and Digital
Color Contrast Calculator
Color Contrast Calculator calculate WCAG 2 relative luminance and contrast ratio for two six-digit sRGB hexadecimal colors.
Web and Digital
Color Contrast Calculator
Calculate WCAG 2 relative luminance and contrast ratio for two six-digit sRGB hexadecimal colors.
Formula
Contrast ratio = (lighter relative luminance + 0.05) / (darker relative luminance + 0.05).
About the Color Contrast Calculator
Calculate WCAG 2 relative luminance and contrast ratio for two six-digit sRGB hexadecimal colors.
How the Color Contrast Calculator Works
Each sRGB channel is linearized with the 0.04045 threshold, weighted into relative luminance, and compared against WCAG 2 AA and AAA text thresholds.
Formula
Contrast ratio = (lighter relative luminance + 0.05) / (darker relative luminance + 0.05).
The calculation runs in your browser. Values are validated for required ranges, compatible units, and method-specific restrictions before results are displayed.
Required Inputs
- Foreground color (required).
- Background color (required).
Results Reported
The result panel reports the final answer and the intermediate quantities needed to check the calculation:
- Contrast ratio (:1)
- Foreground relative luminance
- Background relative luminance
- WCAG AA normal text
- WCAG AA large text
- WCAG AAA normal text
- WCAG AAA large text
Color Contrast Calculator Example
Select Example Data in the calculator to load this reproducible input set:
| Input | Example value |
|---|---|
| Foreground color | #1f2937 |
| Background color | #ffffff |
How to Use the Calculator
- Confirm that the calculator title and formula match the quantity you need.
- Enter every required value using the unit shown with its field.
- Select Example Data to inspect a valid input set, or enter your own values and select Calculate.
- Review all reported values and the displayed formula before using the answer.
- Use Copy Result or Download CSV when you need a reusable record.
Accuracy and Limitations
This evaluates opaque six-digit sRGB colors only. Font size, weight, antialiasing, transparency, gradients, images, states, and non-text requirements need separate review.
Keep units consistent, use measurements that represent the actual situation, retain full precision during the calculation, and round only the final answer. Professional decisions may require current official rules, field measurements, laboratory methods, or specialist review.
Frequently Asked Questions
What does the Color Contrast Calculator calculate?
Calculate WCAG 2 relative luminance and contrast ratio for two six-digit sRGB hexadecimal colors.
Which formula does the Color Contrast Calculator use?
Contrast ratio = (lighter relative luminance + 0.05) / (darker relative luminance + 0.05). Each sRGB channel is linearized with the 0.04045 threshold, weighted into relative luminance, and compared against WCAG 2 AA and AAA text thresholds.
What should I check before using the Color Contrast Calculator result?
This evaluates opaque six-digit sRGB colors only. Font size, weight, antialiasing, transparency, gradients, images, states, and non-text requirements need separate review.