Contrast Checker
Check color contrast ratios between foreground and background colors. Verify WCAG 2.1 AA and AAA compliance with pass/fail indicators.
Something went wrong
Large Text (18pt+)
Normal body text (16px)
More options
How to use Contrast Checker
- Enter or pick the foreground (text) color.
- Enter or pick the background color.
- View the contrast ratio and WCAG pass/fail results.
- Adjust colors until they meet your target compliance level.
What is Contrast Checker?
A contrast checker calculates the contrast ratio between two colors according to the WCAG 2.1 guidelines. It determines whether text is readable against a background color for normal text, large text, and UI components.
WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (AA), 3:1 for large text (AA), 7:1 for normal text (AAA), and 4.5:1 for large text (AAA). This tool instantly shows pass/fail for all four criteria.
FAQ
- What is a good contrast ratio?
- WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.
- What counts as large text?
- Large text is defined as 18pt (24px) and above, or 14pt (18.66px) and above if bold.
Related tools
People also use
- Color Blindness Simulator♿ Accessibility Tools
Free online color blindness simulator. Simulate 8 types of color vision deficiency on any color palette. Check accessibility of your designs.
- AI Color Palette Generator🖼️ Image Tools
Generate harmonious color palettes using color theory. Complementary, analogous, triadic, tetradic, monochromatic schemes. Lock, copy, and export.
- Color Blindness Simulator🗄️ Developer Tools
Simulate protanopia, deuteranopia, tritanopia, and achromatopsia color blindness on images. Upload a photo or use the built-in test pattern.