Color Contrast Checker
Check WCAG AA and AAA color contrast ratios for accessibility compliance.
Large text sample (18px bold)
Normal body text sample — this is the standard font size used in most websites and applications.
—
Contrast Ratio
How to Use This Tool
- Paste or type the text you want to inspect into the Color Contrast Checker input area above.
- The Color Contrast Checker analyzes your text instantly and updates all statistics as you edit.
- Review the metrics shown and refine your text directly in the box to see numbers update live.
Common Use Cases
- Design system tokens: Frontend devs translate brand colors between HEX, RGB, and HSL formats for CSS variables and Tailwind config.
- Accessibility audits: UI designers verify foreground/background pairs meet WCAG contrast ratios before shipping a component.
- Brand consistency: Marketing teams sample logo or photo colors for use in PowerPoint, social graphics, and print collateral.
Frequently Asked Questions
What's the difference between sRGB and Display P3?
sRGB is the web default color space, covering about 35% of visible colors. Display P3 (used by modern iPhones and Macs) covers ~50%, allowing more saturated reds and greens. CSS color(display-p3 ...) targets P3 explicitly; HEX/rgb() remain in sRGB.
How is the Color Contrast Checker accurate for accessibility?
The tool computes contrast using the WCAG 2.1 luminance formula. AA-level body text requires a 4.5:1 ratio; large text (18pt+ or 14pt bold) needs 3:1. AAA requires 7:1. Run your final color pairs through the contrast checker before publishing.
Why do colors look different in print versus on screen?
Screens use additive RGB light; print uses subtractive CMYK ink. Many vivid screen colors (bright blues, greens, oranges) sit outside CMYK gamut and shift to muddier hues when converted. Always proof brand colors in CMYK before mass printing.