Color Contrast Checker
Enter a text color and a background color to see their contrast ratio and whether it passes WCAG accessibility standards. This free online developer calculator runs entirely in your browser — no signup, no data sent anywhere.
Inputs
Results
How It Works (Formula & Method)
Each hex color is converted to relative luminance using the WCAG formula, which weights the red, green, and blue channels and applies a gamma correction. The contrast ratio is (L_lighter + 0.05) / (L_darker + 0.05), producing a value from 1:1 (identical) to 21:1 (black on white). AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1 respectively.
Worked Example
Below is a worked example using the calculator's default values. The same numbers are pre-filled in the form above so you can press Calculate and see the result without typing anything.
Inputs used:
- Text Color (hex): #1f6feb
- Background Color (hex): #ffffff
With these inputs, the calculator computes the metrics shown in the Results panel. Change any value and press Calculate again to see how the result responds — the live widget and the chart both update instantly.
About the Color Contrast Checker
Low-contrast text is one of the most common accessibility failures on the web — it is hard to read for users with low vision, in bright sunlight, or on cheap displays. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios. This tool measures the ratio between any two colors and reports whether it meets the AA and AAA thresholds.
Tips & Considerations
- "Large text" means 18.66px bold or 24px regular and above — it is allowed a lower contrast threshold.
- Aim for AA as a baseline; AAA is the gold standard but is not always practical for brand colors.
- Contrast applies to meaningful graphics and UI components too, not just text — icons and form borders need 3:1.
Frequently Asked Questions
What contrast ratio do I actually need?
For WCAG 2.1 AA — the legal baseline in most jurisdictions — normal-size text needs at least 4.5:1 and large text needs 3:1.
Why does 21:1 mean black on white?
Pure black has zero luminance and pure white has maximum luminance, producing the largest possible ratio the formula can return.
Does contrast matter for disabled buttons?
Disabled elements are exempt from the contrast requirement, but everything a user can interact with or read should meet it.
What does the Color Contrast Checker compute?
The Color Contrast Checker takes 2 input values and returns 3 results. Check the contrast ratio between two colors against WCAG 2.1 AA and AAA accessibility thresholds.