WCAG Contrast Checker
Check color contrast against AA and AAA standards — in your browser.
AA · normal textPass
AA · large textPass
AAA · normal textFail
AAA · large textPass
About Contrast Checker
A contrast checker measures the ratio between a text color and its background and tells you which WCAG accessibility levels it passes. Enter two colors to see the contrast ratio and pass/fail for AA and AAA at normal and large text sizes — essential for accessible, readable design.
Frequently asked questions
- What contrast ratio do I need?
- WCAG AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1 respectively.
- What counts as 'large text'?
- Roughly 18pt (24px) normal weight, or 14pt (18.66px) bold. Large text has a lower contrast requirement.
- How is the contrast ratio calculated?
- From the relative luminance of both colors using the WCAG 2.x formula, giving a ratio between 1:1 and 21:1.
More tools
Unit ConverterNetToolkitClick CounterClick TestPassword GeneratorID GeneratorStopwatchTimerTodo ListWord CounterJSON FormatterJSON VisualizerQR Code GeneratorPercentage CalculatorAge CalculatorBase64 Encode / DecodeCase ConverterHash GeneratorURL Encode / DecodeUnix Timestamp ConverterColor ConverterLorem Ipsum GeneratorBMI CalculatorTip CalculatorJWT DecoderJWT EncoderRegex TesterSlugifyText DiffRemove Duplicate LinesDiscount CalculatorLoan CalculatorTime Duration CalculatorGradient GeneratorPalette GeneratorTints & ShadesImage to Base64Image ResizerFavicon GeneratorMerge & Split PDF