Color Contrast Checker
Color
Pick a foreground and background color to see the exact WCAG contrast ratio, with instant pass/fail for AA and AAA at both normal and large text sizes. A live preview shows how the combination really looks. Runs entirely in your browser.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
How to use
- Choose a foreground (text) color.
- Choose a background color.
- Read the contrast ratio and AA/AAA results.
- Check the live preview for readability.
Frequently asked questions
- What ratios do AA and AAA require?
- AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1 respectively.
- What counts as large text?
- Roughly 18pt (24px), or 14pt (18.66px) bold, and larger.
- How is the ratio calculated?
- From the relative luminance of each color using the official WCAG 2 formula.
- Does it support alpha?
- No, it compares solid colors. Flatten any transparency against its real background first.
Related tools
Color Palette from Image
Drop an image and the tool extracts a dominant-color palette via Canvas — copy HEX or grab the whole set.
Color Blindness Simulator
See how your image looks to people with each of 8 types of color vision deficiency (CVD).
CSS Box Shadow Generator
Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color Palette Generator
Build harmonious color palettes from a base color in six schemes.