About wcag contrast checker
Contrast is the difference in brightness between text and its background. Enough contrast makes text readable for everyone, including people with low vision or in bright sunlight.
WCAG levels
- AA, normal text: contrast ratio of at least 4.5 to 1.
- AA, large text (about 24 px, or 19 px bold): at least 3 to 1.
- AAA, normal text: at least 7 to 1. AAA, large text: at least 4.5 to 1.
- Interface parts such as input borders and icons: at least 3 to 1.
How the ratio is calculated
Each colour gets a relative luminance from its linearised RGB values. The ratio is (lighter + 0.05) ÷ (darker + 0.05). White on black is 21 to 1, and the same colour on itself is 1 to 1.
Fixing a failing pair
Darken the text or lighten the background until the ratio passes. Avoid relying on colour alone to show meaning, such as red and green for errors, and add an icon or text.
