Color Contrast Checker
Check a foreground and background color pair against WCAG 2.1 contrast requirements for text and UI components.
Colors
Enter a valid hex color like #1A2B3C
or #F90
(3 or 6 digits).
Enter a valid hex color like #1A2B3C
or #F90
(3 or 6 digits).
Contrast ratio
Nearest passing colors
This pair fails AA for normal text. Try one of these foreground colors:
Live preview
The quick brown fox jumps over the lazy dog
Large text sample — headings and 18.66px bold or 24px+ text
Normal body text sample. Readable color contrast keeps interfaces usable for everyone, including people with low vision or on low-quality screens. Aim for at least 4.5:1 for body copy and 3:1 for large text and UI components.
About WCAG 2.1 contrast
The contrast ratio is computed from the relative luminance of both colors: each sRGB channel is linearized, combined into a luminance value, and the lighter of the two is divided by the darker (plus the 0.05 offset), giving a ratio between 1:1 and 21:1. WCAG 2.1 requires 4.5:1 for normal text and 3:1 for large text at AA level, and 7:1 / 4.5:1 at the stricter AAA level. Non-text UI elements such as icons, borders, and focus indicators need at least 3:1 against adjacent colors.
We can't find the internet
Attempting to reconnect
Something went wrong!
Attempting to reconnect