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.
Source: SC 1.4.3, W3C – WCAG 2.2: Contrast (Minimum), Level AA. Updated: .
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).
How to check color contrast
- Enter or pick the text color (foreground).
- Enter or pick the background color.
- Read the contrast ratio and the WCAG criteria met (AA, AAA); use the suggested color if needed.
Example: black on white reaches 21:1. Gray #767676 on white scores 4.54:1 and passes AA for normal text; blue #3B82F6 on white only reaches 3.68:1 and passes AA for large text only.
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.
More color tools: the color converter, the color palette generator and the image color picker for colors from screenshots.
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.
What contrast ratio applies to large text?
For large text – 18 pt, or 14 pt bold – WCAG AA requires at least 3:1 and AAA 4.5:1. Normal text needs 4.5:1 (AA) or 7:1 (AAA).
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: · Editorial policy
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)BMI calculator in lb and ft/in or kg and cm: your body mass index with WHO category on a colour scale, healthy weight range for your height and BMI Prime.
- Creatinine Clearance Calculator (Cockcroft-Gault)Creatinine clearance calculator using Cockcroft-Gault: enter age, sex, weight, height and creatinine to get CrCl for actual, ideal and adjusted body weight.
- Random color generatorGenerate a random color or a whole palette: fully random, pastel, vivid, dark, one-hue shades or color harmony. With HEX, RGB, HSL and readable text color.
- How many laps is a mile?How many laps is a mile in a 25 yard, 25 meter or 50 meter pool, and how many laps on a 400 m track in each lane? Works for any distance.
- Music Interval Calculator: Thirds, Fifths and MoreMusic interval calculator: pick two notes and see the interval name, semitones, inversion, plus the ratio and cents in just intonation and equal temperament.
- Triathlon Time CalculatorTriathlon time calculator: enter swim pace, bike speed, run pace and transitions to get your finish time and splits for sprint, standard or long distance.