WCAG contrast checker
ClientEnter a text color and a surface color (HEX, rgb(), hsl(), or a CSS keyword). See the contrast ratio and whether it meets common WCAG thresholds—all in your browser.
WCAG ratios, text size, and non-text content
Contrast ratio compares relative luminance of foreground and background. WCAG defines stricter minimums for normal-sized text than for large text (roughly 18pt regular or 14pt bold and above). Use the controls here to match the typography you actually ship.
Solid fills are easy to score; gradients, images, or video behind text need a separate visual review. If you only have one color so far, start with accessible color suggest for mix-based candidates, then fine-tune with the color converter and keep brand palettes consistent across components.
Contrast
?
Sample heading
Body text at default size should meet 4.5:1 for WCAG AA (normal) or 3:1 for large text (roughly 18px+ or 14px+ bold).
Contrast ratio
16.97 : 1
| Criterion | Min ratio | Result |
|---|---|---|
| AA — normal text | 4.5:1 | Pass |
| AA — large text | 3:1 | Pass |
| AAA — normal text | 7:1 | Pass |
| AAA — large text | 4.5:1 | Pass |
Copy summary:
Nearby workflows on Toolcore
- Accessible color suggest — when one color is fixed and you need a readable partner.
- Color converter — to copy matching HEX, rgb(), or OKLCH for both swatches.
- Tailwind-style theme — after you export ramps, verify primary on background pairs here.
Common use cases
- Verify body copy and headings on marketing pages against brand background colors before hand-off.
- Check placeholder or disabled-state grays so small UI text still clears WCAG AA where your product requires it.
- Compare two candidate palettes by pasting foreground and surface pairs—faster than guessing from swatches alone.
Common mistakes to avoid
Ignoring “large text” thresholds
WCAG allows slightly lower contrast for large or bold text. Use the size that matches your real typography, not an arbitrary default.
Testing only HEX when production uses gradients or images
This tool evaluates solid CSS colors. Photos, noise, or gradients behind text need a separate visual review.
FAQ
Are my colors sent to Toolcore?
No. Contrast is computed in your browser from the values you enter.
What do AA and AAA mean here?
They refer to common WCAG 2.x contrast minimums for normal and large text. AAA is stricter than AA; not every design goal requires AAA for every string.
Does passing here guarantee legal compliance?
It helps catch ratio issues early. Accessibility also depends on focus states, motion, structure, and more—use this as one signal, not the whole audit.
Common search terms
Phrases people search for that match this tool. See the full long-tail keyword index.
- wcag contrast ratio checker
- aa aaa contrast calculator online
- text background contrast checker
- accessibility color contrast tool
More tools
Related utilities you can open in another tab—mostly client-side.
Accessible color suggest
ClientOne anchor color (text or surface): sRGB mixes toward white/black to hit WCAG targets—copy HEX and verify in the contrast checker.
Color tools
ClientHub for converter, harmony palettes, tint/shade scales, Tailwind-style theme, MUI createTheme palette, HeroUI-style CSS variables, WCAG contrast, accessible color suggestions, and web-safe colors—open a card or jump to a subtool.
Color converter
ClientHEX, RGB, HSL, OKLCH, named colors—paste a CSS color or use harmonic palette hints.
Harmony color palette
ClientComplementary, split, triadic, analogous, tetradic, and monochromatic sets from one CSS color—HEX copy and :root variables.