Color contrast checker (WCAG 2.2)
Enter or pick a text color and a background color. The checker calculates the relative luminance of both colors and the contrast ratio exactly as defined by the W3C and shows which WCAG 2.2 success criteria are met. If the contrast falls short, it suggests the nearest text color that passes.
How it is calculated
How contrast is calculated
WCAG 2.2 defines the contrast ratio as (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 that of the darker one. The result ranges from 1:1 (identical colors) to 21:1 (black on white).
The checker calculates relative luminance exactly as the W3C defines it: each sRGB channel is divided by 255 and linearized – values up to 0.04045 are divided by 12.92, higher values become ((value + 0.055) ÷ 1.055)2.4. Then L = 0.2126 × R + 0.7152 × G + 0.0722 × B.
Example #777777 on white: 0x77 = 119, 119 ÷ 255 = 0.4667 → ((0.4667 + 0.055) ÷ 1.055)2.4 = 0.1845. Since all three channels are equal, L = 0.1845. White has L = 1. Contrast = (1 + 0.05) ÷ (0.1845 + 0.05) = 4.48:1. That is enough for large text (3:1) but just misses the mark for normal text (4.5:1). The suggested #767676 reaches 4.54:1.
WCAG 2.2 requirements
| Success criterion | Level | Normal text | Large text |
|---|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | 4.5:1 | 3:1 |
| 1.4.6 Contrast (Enhanced) | AAA | 7:1 | 4.5:1 |
| 1.4.11 Non-text Contrast (UI components, graphics) | AA | 3:1 | |
Under WCAG, large text is at least 18 point, or at least 14 point bold – in a browser that is roughly 24 px and 18.67 px. Exceptions include logos, purely decorative text and inactive controls.
No rounding
WCAG compares the exact value: 4.499:1 does not meet 4.5:1. The checker therefore rates the unrounded ratio and displays two decimal places; where rounding would appear to reach a threshold, it truncates instead (4.49 rather than 4.50).
Transparent colors
Colors with an alpha value (e.g. rgba(0, 0, 0, 0.6) or #00000099) are layered the way a browser draws them: a transparent background on white, a transparent text color on the background. If your page sits on a different backdrop, enter that opaque color as the background.
Frequently asked questions
What contrast ratio does accessibility require?
At least 4.5:1 for normal text (WCAG level AA, SC 1.4.3) and 3:1 for large text. The stricter level AAA requires 7:1 and 4.5:1 respectively. Controls such as input borders and icons need 3:1 (SC 1.4.11).
Which grays on white still pass AA?
#767676 is the lightest gray with at least 4.5:1 on white (4.54:1). #777777 falls just short at 4.48:1.
How does the checker find the suggested color?
It keeps the hue and saturation of your text color and changes only the HSL lightness in small steps, both lighter and darker. It suggests the smallest change whose rounded color safely reaches the target.
Which accessibility laws refer to these contrast values?
In the US, the Section 508 standards for federal agencies incorporate WCAG 2.0 level AA, and the ADA Title II rule for state and local governments adopts WCAG 2.1 AA. In the EU, the European Accessibility Act points via the harmonized standard EN 301 549 to WCAG 2.1 AA. The contrast criteria are the same in WCAG 2.0, 2.1 and 2.2: 4.5:1 for text, 3:1 for large text – plus 3:1 for UI components from WCAG 2.1 onward.
Sources and legal basis
- SC 1.4.3: W3C – WCAG 2.2: Contrast (Minimum), Level AA
- SC 1.4.6: W3C – WCAG 2.2: Contrast (Enhanced), Level AAA
- SC 1.4.11: W3C – WCAG 2.2: Non-text Contrast, Level AA
- WCAG 2.2: W3C – WCAG 2.2: Definition “relative luminance”
- WCAG 2.2: W3C – WCAG 2.2: Definition “contrast ratio”
- W3C WAI – Understanding SC 1.4.3: Contrast (Minimum)
As of:
Related tools
- Color palette generatorBuild matching colors from one base color: complementary, analogous, triadic, square, split-complementary or monochrome – with HEX, RGB and HSL values.
- Color converter: HEX, RGB, HSL, HSV, CMYKConvert color codes: HEX to RGB, RGB to HEX, HSL, HSV, HWB and CMYK – type any format or use the color picker and copy the result, right in your browser.
- Color picker from image (eyedropper)Get color codes from any image: open a photo, click a spot and copy the HEX, RGB or HSL value – plus the main colors. No upload, it all stays in your browser.
- BMI calculator (WHO categories)Calculate your body mass index in lb and ft/in or kg and cm. See your WHO category, from underweight to obesity class III, and the healthy weight range.
- BMR and daily energy needs calculatorCalculate your basal metabolic rate with the Mifflin-St Jeor equation and your total daily energy needs with FAO/WHO activity levels (PAL), in kcal and kJ.
- Body Fat Calculator (U.S. Navy Method)Estimate your body fat percentage from height, neck, waist and hip measurements using the U.S. Navy equations by Hodgdon and Beckett (1984). In inches or cm.