Color contrast checker
Test text against a solid colour or across a whole gradient. Get WCAG 2 AA and AAA results, the weakest point on the gradient, and the nearest colour that passes.
Large heading 24px
Body text at 16px should read comfortably for everyone, including people with low vision.
- AA · normal text ≥ 4.5:1passes
- AA · large text ≥ 3:1passes
- AAA · normal text ≥ 7:1fails
- AAA · large text ≥ 4.5:1passes
- UI components ≥ 3:1passes
How the contrast ratio is worked out
The WCAG formula doesn’t compare colours by their hex numbers. It estimates how much light each colour sends to your eye, called relative luminance, and compares the two. Step through the calculation for your text colour #ffffff:
The heavy green weighting is why yellow on white fails badly while blue on white passes easily, even though both look “bright” as hex codes.
Questions
What contrast ratio do I need for WCAG AA?
WCAG 2.1 and 2.2 Success Criterion 1.4.3 require 4.5:1 for normal text and 3:1 for large text (at least 24px, or 18.66px bold). Level AAA (1.4.6) raises that to 7:1 and 4.5:1. Icons, input borders and focus rings need 3:1 against their neighbours (1.4.11).
How is the contrast ratio calculated?
Each colour is converted to relative luminance: the sRGB channels are linearised, then weighted 0.2126 red, 0.7152 green and 0.0722 blue. The ratio is (lighter + 0.05) ÷ (darker + 0.05), so it runs from 1:1 (identical) to 21:1 (black on white).
How do I check contrast on a gradient background?
Test the text colour against every point the text could sit on and use the worst result. This checker samples 101 points across your gradient and reports the minimum ratio and where it happens. If text only covers part of the gradient, set the range to just that part.
Does opacity affect contrast?
Yes. Semi-transparent text or backgrounds blend with whatever is underneath, so test the colour you actually see. Use solid hex values here for a reliable result.
What about APCA and WCAG 3?
APCA is a newer perceptual contrast model proposed for WCAG 3, which is still a draft. Legal and procurement requirements today (e.g. the European Accessibility Act via EN 301 549, and ADA guidance in the US) reference WCAG 2.x, so this tool reports WCAG 2 ratios.