Pick to check Color Contrast
Color Contrast
4.5:1
WCAG Compliance
Normal Text
AA
AAA
Large Text
AA
AAA
Graphics & UI
AA
Oops! You can't check the contrast.
-
Desktops, Laptops
-
Chrome, Edge, Opera (Latest versions)
-
Firefox, Safari, Internet Explorer
-
Mobile Devices, Smartphones, Tablets
Online Contrast Checker works with
Not ready yet are
Visual Example
Large Text
Normal or small text, text below XY pixel here. Normal or small text, text below XY pixel here.
What is the Color Contrast Picker?
Use our free online color contrast checker to instantly evaluate the contrast ratio between any foreground and background colors. Tailored for designers, developers, and content creators, it shows real-time WCAG AA/AAA compliance for normal text, large text, and graphics/UI elements. Simply pick colors, swap colors, and get immediate pass/fail feedback on accessibility thresholds (like 4.5:1 for normal text and 3:1 for large text). The intuitive interface helps you adjust palettes for better readability and inclusive web design—no download required. Optimize your site’s color choices to boost usability, meet accessibility standards, and deliver a more user-friendly experience.
WCAG Compliance
| Element | What | AA Requirement | AAA Requirement |
|---|---|---|---|
| Normal Text |
AA Regular body text below 18pt (24px) or below 14pt (18.66px) bold |
4.5:1 | 7:1 |
| Large Text |
Headings, big labels above 18pt (24px) or above 14pt (18.66px) bold |
3:1 | 4.5:1 |
| Graphics & UI |
Meaningful non-text elements Icons, form borders, buttons |
3:1 |