Color Contrast Checker
Enter foreground and background colors to check WCAG contrast ratios and accessibility compliance.
Sample Text — Normal Size
Large Text Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Contrast Ratio
21.00:1
How to use Color Contrast Checker
Check the contrast ratio between any two colors to verify they meet WCAG 2.1 accessibility standards — AA (4.5:1 for normal text) and AAA (7:1). Instantly see pass/fail results for normal text, large text, and UI components. Enter HEX, RGB, or HSL values, or pick colors visually. Essential for accessible design that works for users with low vision or color deficiency.
- Enter the foreground (text) color as HEX, RGB, or HSL.
- Enter the background color in the same or a different format.
- The contrast ratio is calculated instantly using the WCAG relative luminance formula.
- Review the WCAG AA and AAA pass/fail badges for normal text, large text, and UI components.
- Adjust either color until all required levels pass.
Your data never leaves your device — 100% private processing.
WCAG contrast requirements explained
WCAG 2.1 Level AA requires a 4.5:1 ratio for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. UI components (buttons, input borders, icons) require a 3:1 ratio against their adjacent color at AA level. These ratios are calculated using relative luminance — a weighted sum of linearized RGB values that models the brightness perceived by the human eye.
| Content type | AA minimum | AAA minimum |
|---|---|---|
| Normal text (<18pt) | 4.5:1 | 7:1 |
| Large text (≥18pt or ≥14pt bold) | 3:1 | 4.5:1 |
| UI components & graphics | 3:1 | Not specified |
| Decorative / inactive elements | Exempt | Exempt |
Common failures and how to fix them
Light grey text on white backgrounds is the most frequent WCAG failure — #999 on #fff is only 2.85:1. Dark blue on black, yellow on white, and mid-tone greens on grey are also common failures. To fix: darken the text color (increase contrast by reducing lightness in HSL), lighten the background, or switch to a higher-contrast color pairing. Tools like this one let you live-preview adjustments. Note that contrast is not the only accessibility consideration — color should never be the sole means of conveying information.
Glossary
- Relative luminance
- A WCAG measure of perceived brightness, calculated from linearized RGB values with weights: R×0.2126 + G×0.7152 + B×0.0722.
- WCAG
- Web Content Accessibility Guidelines — the international standard for web accessibility published by the W3C.
- Contrast ratio
- The ratio of relative luminance between two colors, ranging from 1:1 (identical) to 21:1 (black on white).
- Color deficiency
- Reduced ability to distinguish certain colors — affects ~8% of males (red-green) and ~0.5% of females.
Related reading
Frequently Asked Questions
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
Why use Color Contrast Checker?
- Converts between HEX, RGB, HSL, HSV, and CMYK instantly
- Accessibility contrast checker built in
- Generates harmonious palette variations from a single colour
- Export-ready CSS variables and design tokens
Common use cases
- Pick brand colours that meet WCAG accessibility standards
- Generate a complementary palette from a logo colour
- Convert Figma HEX codes to CSS rgb() for developers
- Create a gradient from two brand colours
- Verify sufficient contrast for text on coloured backgrounds
Related Color & Design
Color Converter
Convert colors between HEX, RGB, HSL, and HSV formats. See live color previews and copy any value instantly — perfect for design and CSS work.
Color Palette Generator
Generate beautiful color palettes from any base color. Create monochromatic, analogous, complementary, and triadic color schemes.
Color Picker & Converter
Pick a color and instantly convert between HEX, RGB, HSL, HSB, and CMYK. Generate tints, shades, and color palettes.
CSS Gradient Generator
Create beautiful CSS linear, radial, and conic gradients online. Get the CSS code instantly with a live preview.
Color Contrast Checker
Check color contrast ratio for WCAG AA and AAA accessibility compliance. See if your text and background colors meet accessibility standards.
Color Palette Generator
Generate beautiful harmonious color palettes online. Choose from complementary, analogous, triadic, and monochromatic schemes. Free color scheme creator.
Explore all Color & Design.