Color Contrast Checker Color
Check text and background contrast against the WCAG accessibility standards.
Color Contrast Checker is a free online tool that check text and background contrast against the WCAG accessibility standards. It runs entirely in your web browser using plain JavaScript, so files are processed on your own device and never uploaded to a server. There is no sign-up, no file size limit imposed by the site, no watermark and no paid tier.
- Price
- Free — no account, no quota, no watermark
- Category
- Color
- Where it runs
- In your browser, on your device
- Files uploaded
- None
- Technology
- plain JavaScript
- Settings
- 2
- Works offline
- Yes, after the first visit
About Color Contrast Checker
Contrast is the accessibility rule most often broken by accident, usually by light gray text on white that looked fine on the designer's calibrated monitor. The ratios here follow WCAG 2.2, computed from relative luminance rather than a rough perceptual guess.
How to use it
- Enter text color and background color.
- Results update the moment anything changes.
The 2 settings
| Setting | What it does | Default |
|---|---|---|
| Text color | A color, picked from your system color picker. | #0B1120 |
| Background color | A color, picked from your system color picker. | #FFD84D |
Under the hood
| Runs on | plain JavaScript — runs the whole thing |
| Controls | Text color, Background color |
Questions
What counts as "large text"?
18pt and above (roughly 24px), or 14pt bold (roughly 18.5px). Large text only needs 3:1 for AA, because size itself aids legibility.
Do icons and form borders need to pass?
Yes — WCAG 2.1 added a 3:1 requirement for user interface components and meaningful graphics. Placeholder text and disabled controls are exempt, which is not license to make them invisible.
My brand color fails. What now?
Keep it for large headings, backgrounds and non-text elements where 3:1 applies, and use a darkened variant for body copy. Almost every brand palette needs a separate accessible text tone.