WCAG Color Contrast Checker
Test foreground and background colors for accessibility compliance. See contrast ratios, pass/fail badges, and suggested fixes instantly.
Sample heading text
Body copy preview. The quick brown fox jumps over the lazy dog.
14.68:1
Contrast ratio
Need lighter/darker variants? Try the tint & shade generator.
Color tools
More free color tools
Palettes, gradients, accessibility checks, and print-ready conversions — all in one place.
- Color Palette Generator
Generate harmonious palettes from one color — complementary, triadic, analogous, and more. CMYK values and print gamut warnings included.
- CSS Gradient Generator
Build linear, radial, and conic CSS gradients with live preview. Copy production-ready code instantly.
- Tint & Shade Generator
Turn one brand color into a Tailwind-compatible 50–950 scale with WCAG contrast badges on every swatch.
- Palette from Image
Extract dominant colors from any photo — runs entirely in your browser. Send colors to converters or palette tools.
- Color Blindness Simulator
Preview palettes as seen with protanopia, deuteranopia, or tritanopia. Essential for accessible design.
- Interactive Color Wheel
Drag to pick a hue and see complementary, triadic, and analogous harmonies live — with HEX, RGB, and CMYK values.
- Print Gamut Checker
See exactly how a screen color shifts when printed in CMYK. Side-by-side press preview with shift warnings.
- Compare Colors (Delta E)
Measure the perceptual difference between two colors with ΔE2000 — plus HEX, RGB, CMYK, and HSL values for both.
Why contrast matters for design and development
Low contrast text excludes users with low vision and fails legal accessibility requirements in many markets. Checking contrast before launch prevents expensive redesigns and improves readability for everyone.
After validating pairs here, build a full accessible scale with the Tailwind color scale generator or simulate how palettes appear to color-blind users with the color blindness simulator.
FAQ
Frequently asked questions
Accessibility and contrast checking FAQ.
- What contrast ratio passes WCAG AA?
- Normal text needs at least 4.5:1. Large text (18pt+ or 14pt bold+) needs at least 3:1. AAA requires 7:1 for normal text.
- How is contrast ratio calculated?
- WCAG uses relative luminance of each color in sRGB space, then computes (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color.
- What is palette matrix mode?
- Paste multiple HEX colors to see contrast ratios for every foreground/background pair — useful when auditing an entire brand palette.
- What if my brand color fails contrast?
- Use the suggested fix to find the nearest passing shade, or generate accessible variants with the tint & shade generator.