Contrast Checker
Check the contrast ratio between a text color and a background color against WCAG 2.x AA and AAA, with a live preview and suggested colors that pass. Accepts HEX, rgb() and hsl() values with transparency, and simulates how the colors look with protanopia, deuteranopia and tritanopia.
What is the Contrast Checker?
The Contrast Checker calculates the contrast ratio between a foreground (text) color and a background color, as defined by the Web Content Accessibility Guidelines (WCAG) 2.x, and shows which success criteria the pair meets. If it fails, the tool suggests the nearest colors that pass.
How to use
- Enter the Foreground (text) and Background colors, or click the color swatch next to each field to use a color picker. The swap button exchanges the two.
- Read the Contrast ratio and the Pass/Fail result for each criterion.
- Check the Preview of normal text, large text, bold text, buttons, an icon and a link in your colors.
- If the pair fails, open Suggestions: choose Adjust foreground or Adjust background and a Target ratio, then click Apply on a suggested color, or copy its HEX value.
- Turn on Color vision simulation to preview the colors with three types of color vision deficiency.
Features
- Color input as HEX (
#RGB,#RGBA,#RRGGBB,#RRGGBBAA),rgb()/rgba()andhsl()/hsla(), plus a color picker - Semi-transparent foregrounds are blended onto the background before the ratio is calculated
- Relative luminance of both colors and the contrast ratio to two decimal places
- Pass/fail for AA and AAA normal text, large text, and non-text UI components
- Suggestions that keep the hue and saturation and change only the lightness
- Protanopia, deuteranopia and tritanopia simulation with the contrast ratio of each
- The colors and settings are saved in your browser
WCAG contrast requirements
| Criterion | Level | Minimum ratio |
|---|---|---|
| 1.4.3 Contrast (Minimum), normal text | AA | 4.5:1 |
| 1.4.3 Contrast (Minimum), large text | AA | 3:1 |
| 1.4.6 Contrast (Enhanced), normal text | AAA | 7:1 |
| 1.4.6 Contrast (Enhanced), large text | AAA | 4.5:1 |
| 1.4.11 Non-text Contrast (UI components and graphics) | AA | 3:1 |
Large text is at least 18pt (24px), or at least 14pt (about 18.66px) and bold.
How it is calculated
- Relative luminance:
L = 0.2126 R + 0.7152 G + 0.0722 B, using linearized sRGB values. - Contrast ratio:
(L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. It ranges from 1:1 to 21:1. - Pass/fail uses the exact ratio without rounding. For example,
#777777on white is 4.48:1 and fails 4.5:1, while#767676is 4.54:1 and passes. - A semi-transparent background is treated as if it were placed on white.
FAQ
Why is there no suggestion for one direction?
Suggestions only change the lightness of the color you adjust. If no lightness reaches the target ratio, for example with a very transparent foreground, no color is shown for that direction.
How accurate is the color vision simulation?
It uses the matrices by Machado, Oliveira and Fernandes (2009) at full severity, applied in linear RGB. It is an approximation, and how colors look varies from person to person. The WCAG results are always based on the original colors.
Does this check WCAG 3 (APCA)?
No. The tool uses the WCAG 2.x contrast ratio, the formula used by WCAG 2.1 and 2.2, which most accessibility requirements refer to today.
Are my colors sent anywhere?
No. All calculations run in your browser.