Color Contrast Checker
Check the WCAG contrast ratio between text and background colors and see if it passes AA/AAA.
Was this tool helpful?
Thanks for the feedback!
This checker calculates the WCAG contrast ratio between a text colour and a background colour, both entered as hex codes, and tells you whether the pair passes the AA and AAA levels for normal and large text. A sample strip shows the text colour on the background so you can see the result as well as read it.
Reading the four pass/fail results
WCAG sets different minimum ratios depending on how strict you want to be and how big the text is:
| Level | Normal text | Large text |
|---|---|---|
| AA | 4.5 : 1 | 3 : 1 |
| AAA | 7 : 1 | 4.5 : 1 |
"Large" means at least 18 point (24 CSS pixels) at regular weight, or at least 14 point (about 18.7 pixels) in bold. Body copy, form labels and button text are almost always normal-size, so the AA normal row is the one most sites must pass. The same 3 : 1 figure is also what WCAG 2.1 asks of icons, input borders and focus indicators against the colours next to them, so the "AA large text" row doubles as a check for those.
How the ratio is calculated
Each colour is converted to relative luminance. Every channel is divided by 255, and values at or below 0.03928 are divided by 12.92; larger values become ((c + 0.055) ÷ 1.055) raised to the power 2.4. The channels are then weighted: L = 0.2126 R + 0.7152 G + 0.0722 B. Green carries most of the weight because our eyes are most sensitive to it. The ratio is (lighter L + 0.05) ÷ (darker L + 0.05), which runs from 1 : 1 for identical colours to 21 : 1 for black on white.
For the default pair, white has L = 1 and #6d48f5 has L ≈ 0.145, so the ratio is 1.05 ÷ 0.195 ≈ 5.39 : 1. The tool shows the ratio rounded to two decimals but judges pass or fail on the exact value.
Worked examples
| Text on background | Ratio | Result |
|---|---|---|
| #ffffff on #6d48f5 | 5.39 : 1 | AA pass, AAA normal fail |
| #777777 on #ffffff | 4.48 : 1 | Large text only |
| #767676 on #ffffff | 4.54 : 1 | AA pass |
| #ffffff on #573ac4 | 7.48 : 1 | Passes everything |
The two greys show how close the line can be: #777777 looks perfectly readable to many people yet misses AA, while #767676, one step darker, is the lightest grey that passes on a white background.
Fixing a pair that fails
Move the two colours further apart in lightness while keeping the hue. Darken the darker colour or lighten the lighter one, then check again. The Shades & Tints Generator is the quickest way to do this: the 20% shade of #6d48f5 is #573ac4, which takes white text from 5.39 : 1 to 7.48 : 1 while staying recognisably the same violet. Also avoid using colour alone to carry meaning, such as red and green status labels with no text or icon.
Accepted input and limits
Both fields take six-digit hex or three-digit shorthand, with or without the #, in upper or lower case (fff, #6D48F5). Colour names, rgb(), hsl() and eight-digit hex with transparency are not accepted; convert them first with the Color Converter. For text over a photo or gradient, test the text colour against both the lightest and darkest area behind it. The checker follows the WCAG 2 formula, not the newer APCA method proposed for future guidelines.