Color desk
Color Contrast Checker
Check two colors against WCAG text contrast thresholds.
Color Contrast Checker: TOEA applies this fixed formula: Ratio = (L1 + 0.05) ÷ (L2 + 0.05). Color math runs locally in your browser. Runs 100% locally in your browser with zero server file uploads.
- Category
- Everyday tools
- Runs
- In your browser
- Cost
- Free · no sign-up
- Availability
- Ready to use
Contrast ratio
17.74
- Normal text AA
- Pass
- Normal text AAA
- Pass
- Large text AA
- Pass
- Large text AAA
- Pass
- Summary
- AAA for normal and large text
Ratio = (L1 + 0.05) ÷ (L2 + 0.05)- Results are deterministic sRGB mathematical transformations; display appearance depends on your monitor and color profile.
- HEX input accepts #RGB or #RRGGBB notation. Values stay in your browser and are not uploaded.
What counts as large text
WCAG defines large text as at least 18 point, about 24 CSS pixels, or 14 point bold, about 18.7 pixels. Only text at those sizes may use the lower 3:1 threshold; body copy, captions, and form labels need 4.5:1 for AA. Ratios run from 1:1 for identical colors to 21:1 for black on white. Buttons' outlines, form field borders, focus indicators, and meaningful icons are covered by a separate rule, non-text contrast, which asks for 3:1 against adjacent colors.
Transparent colors and exemptions
The checker needs solid colors. For semi-transparent text or overlays, work out the color actually shown by blending it with its background in the color mixer, using the opacity as the weight, and check that.
Disabled controls, pure decoration, and logos are exempt from the contrast rules. Placeholder text in a form field is not, which is why pale gray placeholders are among the most common failures.
How to use it
- Enter valid #RGB or #RRGGBB values and any requested percentage.
- Run the fixed browser-local color operation.
- Review the swatches and copy the result or palette values.
Privacy & limitations
Color values stay on this device. Contrast output is a mathematical checker, not a blanket WCAG compliance guarantee; context, font rendering, non-text contrast, and user interface states still need review.
Related tools
Frequently asked questions
How does the Contrast Checker work?
It uses Ratio = (L1 + 0.05) ÷ (L2 + 0.05).
Which HEX formats are accepted?
Use three-digit #RGB or six-digit #RRGGBB sRGB notation. Alpha channels and named colors are not accepted.
Does the contrast result guarantee accessibility compliance?
No. It is a mathematical contrast checker for the reported colors and text thresholds, not a blanket compliance guarantee.
Free tool · runs in your browser · no account required