Contrast checker
Check a text color against its background with the WCAG 2 contrast ratio: AA and AAA for normal and large text, and 3:1 for interface parts. If a pair fails, get the closest text color that passes.
Worked example
Mid gray text on white, a common choice for secondary text.
Text: #777777 Background: #ffffff
Ratio 4.47:1 AA normal text: fail AA large text: pass AAA normal text: fail AAA large text: fail UI components: pass Nearest AA text color: #767676
The exact ratio is 4.478:1. One small step darker reaches 4.5:1.
Common mistakes
Rounding up to pass
4.48 is not 4.5. Thresholds are exact, so a ratio that only reaches 4.5 after rounding still fails.
Checking only body text
Placeholder text, disabled-looking labels and links need contrast too. Placeholders are often the worst offenders.
Ignoring hover and focus states
A button that passes at rest can fail when hovered. Check each state’s colors.
Testing text on a photo with one color
Text over an image meets many backgrounds. Check against the lightest and darkest parts, or add an overlay.
How it works
- 1
Enter two colors
Pick or type the text and background colors in hex, rgb() or hsl(). The swap button flips them.
- 2
Read the result
The ratio is shown to two decimals, rounded down, with pass or fail for each WCAG level and a live preview.
- 3
Fix a failing pair
When text fails, the suggestion keeps its hue and changes only lightness, as little as possible, until it passes.
Questions
- What contrast ratio do I need?
- WCAG 2 level AA asks for 4.5:1 for normal text and 3:1 for large text. Level AAA asks for 7:1 and 4.5:1. Icons, input borders and other parts of the interface need 3:1 against what is next to them.
- What counts as large text?
- At least 18 point (24 CSS pixels) regular, or 14 point (about 18.7 CSS pixels) bold.
- Why does #777 on white fail when it rounds to 4.5?
- Its ratio is about 4.478:1, and WCAG compares the exact ratio with the threshold, so anything below 4.5 fails. This page rounds down for that reason; #767676 is the lightest gray that passes on white.
- How are transparent colors handled?
- A translucent text color is painted over the background first, and a translucent background over white, and the ratio is measured on the result.
- Is this the APCA contrast from WCAG 3?
- No. This is the WCAG 2.x formula, the one current accessibility guidelines refer to. APCA is still a draft and uses different numbers.