Color Contrast Checker
Check WCAG contrast ratio between text and background colors.
This tool runs entirely in your browser. Your files are never uploaded to a server.
17.74:1
Contrast ratio
Pass
AA — normal text
Pass
AA — large text
Pass
AAA — normal text
Pass
AAA — large text
What this checker does
Calculates the WCAG relative-luminance contrast ratio between a foreground (text) color and a background color, and shows whether that ratio passes each accessibility threshold.
How to use it
Enter foreground and background colors as three- or six-digit HEX values. The contrast ratio, a live preview of the pair, and pass/fail results update as you type.
Worked example
A foreground of #767676 on a white (#ffffff) background gives a contrast ratio of about 4.54:1 — it passes AA for normal text (needs 4.5:1) and AA for large text, but falls short of AAA normal (needs 7:1).
WCAG thresholds
The tool checks four thresholds: AA normal text at 4.5:1, AA large text at 3:1, AAA normal text at 7:1, and AAA large text at 4.5:1. Large text means 18pt or larger, or 14pt and bold.
Why contrast matters
Sufficient contrast keeps text readable for users with low vision or color-vision deficiencies, and meeting these thresholds is a requirement for WCAG-conformant websites.
Limitations
This checks only the two opaque sRGB colors you enter — it doesn't inspect font size or weight, transparency, gradients, background images, interaction states, or the rest of your page, so treat a pass as one accessibility check, not a full audit.
Privacy
The calculation runs entirely in your browser; the colors you enter are not uploaded.
Frequently Asked Questions
- What contrast ratio do I need for WCAG AA?
- At least 4.5:1 for normal text, or 3:1 for large text (18pt+ or 14pt+ bold).
- What about WCAG AAA?
- AAA is stricter: 7:1 for normal text and 4.5:1 for large text.
- Why does accessibility contrast matter?
- Sufficient contrast makes text readable for users with low vision or color vision deficiencies, and is required for WCAG-compliant websites.
Related Tools
Color Name Finder
Find the closest named color match for any hex code.
CMYK Color Converter
Convert any hex or RGB color to CMYK for print.
Gradient CSS Generator
Create a two-color CSS gradient and copy the code instantly.
Analogous Color Generator
Generate a harmonious analogous color scheme from any base color.
Color Blindness Simulator
Preview how a color looks with protanopia, deuteranopia or tritanopia.
Color Palette Generator
Generate a random 5-color palette with one click.