WCAG Contrast Checker
Foreground
Background
Normal sample text at 16px.
Large sample text at 24px.
Contrast ratio
21:1
- AA normalPass
- AA largePass
- AAA normalPass
- AAA largePass
Color contrast ratio checker for WCAG AA and AAA
Check whether body copy, headings, and controls meet WCAG 2 contrast before you ship a palette. The ratio uses relative luminance, not a simple brightness guess. Black on white is 21:1; identical colors are 1:1.
This is not a full accessibility audit. It does not test focus rings, non-text contrast for icons at 3:1, or color-vision simulation.
Frequently asked questions
- Is this a WCAG contrast checker?
- Yes. Contrast checking is the purpose of this page. There is no separate WCAG-only URL. Ratios use WCAG 2 relative luminance with sRGB linearization.
- What ratios are required?
- AA normal text needs 4.5:1. AA large text needs 3:1. AAA normal text needs 7:1. AAA large text needs 4.5:1. Large text is 18pt or 14pt bold.
- Why can a pair pass AA large but fail AA normal?
- Large text is allowed a lower ratio. A mid-gray on white might be fine for a heading and fail for body copy.
- Does pass/fail rely on color alone?
- No. Each check is labeled Pass or Fail in text. The preview is extra context, not the only signal.
- Are semi-transparent colors supported?
- Luminance is computed from the opaque RGB channels. Composite a transparent color onto its real background in a design tool first if you need that exact pair.
Related tools
Continue with related browser-based tools on Toolshelf.
- Color Picker — Free online color picker with HEX, RGB, and HSL.
- Color Converter — HEX to RGB converter online.
- Color Palette Generator — Color palette generator from a base HEX.
- Color Shades & Tints Generator — Color shades and tints generator.
- CSS Gradient Generator — CSS gradient generator for linear, radial, and conic backgrounds.
- QR Code Generator — Create QR codes for URLs, text, Wi-Fi, contacts, email, phone numbers and more.
- Image to Base64 Converter — Image to Base64 converter.
- Random Color Generator — Random color generator for HEX, RGB, and HSL.
Use cases
- For Designers — Pick colors, check contrast, and build palettes and gradients.
What would you like to do next?
Continue working with the next step in this workflow. Recently used tools in this set are listed first.
- Color Picker — Free online color picker with HEX, RGB, and HSL.
- Color Converter — HEX to RGB converter online.
- Color Palette Generator — Color palette generator from a base HEX.
- Color Shades & Tints Generator — Color shades and tints generator.
You may also need
Continue with related browser-based tools on Toolshelf.
- Color Picker — Free online color picker with HEX, RGB, and HSL.
- Color Converter — HEX to RGB converter online.
- Color Palette Generator — Color palette generator from a base HEX.
- Color Shades & Tints Generator — Color shades and tints generator.
- CSS Gradient Generator — CSS gradient generator for linear, radial, and conic backgrounds.
- QR Code Generator — Create QR codes for URLs, text, Wi-Fi, contacts, email, phone numbers and more.
- Image to Base64 Converter — Image to Base64 converter.
- Random Color Generator — Random color generator for HEX, RGB, and HSL.