WCAG Color Contrast Checker
Real-time WCAG 2.2 color contrast checker with AA / AAA pass-fail for normal text, large text, and UI components. Includes live previews of buttons, cards, and inputs plus one-click CSS variable export.
Contrast ratio
21.00:1
WCAG 2.2 results
| Category | AA | AAA |
|---|---|---|
| Normal text | Passneed 4.5:1 | Passneed 7:1 |
| Large text (≥18pt) | Passneed 3:1 | Passneed 4.5:1 |
| UI components | Passneed 3:1 | Passneed 4.5:1 |
Component preview
CSS export
:root {
--color-text: #000000;
--color-bg: #ffffff;
}How to use
- 1 Pick or type the foreground (text) color and background color.
- 2 Read the contrast ratio and the AA / AAA pass-fail rows for normal text, large text, and UI components.
- 3 Verify the result in the component previews and export as CSS variables if needed.
Related tools
Barcode Generator
Use Barcode Generator online for free. Your files and data stay in your browser.
Box Shadow Generator
Use Box Shadow Generator online for free. Your files and data stay in your browser.
Color Picker
Use Color Picker online for free. Your files and data stay in your browser.
CSS Gradient Generator
Use CSS Gradient Generator online for free. Your files and data stay in your browser.
Favicon Generator
Use Favicon Generator online for free. Your files and data stay in your browser.
Online Whiteboard
Use Online Whiteboard online for free. Your files and data stay in your browser.
QR Code Decoder
Use QR Code Decoder online for free. Your files and data stay in your browser.
QR Code Generator
Use QR Code Generator online for free. Your files and data stay in your browser.
About this tool
This tool computes the WCAG 2.2 contrast ratio between any two colors (range 1 to 21). WCAG 2.2 requires at least 4.5:1 for normal text (AA) or 7:1 (AAA), at least 3:1 (AA) or 4.5:1 (AAA) for large text, and at least 3:1 for UI components such as input borders, icons, and focus rings. Falling short of these thresholds locks out low-vision users, colorblind users, and anyone reading on a phone in bright sunlight.
Beyond the raw ratio, the tool renders real button, card, input, and link previews so you can judge the combination in context rather than staring at two flat color swatches. The hex inputs accept #RGB / #RRGGBB and rgb() formats, and you can copy the pair as CSS variables for direct use in a design system or Tailwind theme.
All math runs locally — relative luminance, contrast ratio, and AA/AAA evaluation are pure functions with no network calls.
Frequently asked questions
Did contrast rules change between WCAG 2.1 and WCAG 2.2? +
The numeric thresholds (4.5:1, 3:1, 7:1) are unchanged. WCAG 2.2 added the standalone Success Criterion 1.4.11 Non-text Contrast, which formalized that UI components (button borders, form field outlines, icons) need at least 3:1 against adjacent colors. This tool checks both text and UI component tiers.
A combination that looks fine to me is failing. Why? +
WCAG uses relative luminance, which weights green more than red and blue to match human vision, not raw color difference. Common false-confidence cases: red text on green (invisible to red-green colorblind users), dark gray text on a slightly lighter gray (insufficient luminance difference), or a saturated brand color used as button text (most brand colors are bright but not luminous). Always verify with a tool instead of eyeballing.
When should I aim for AA versus AAA? +
AA is the legal minimum in most jurisdictions (EU EN 301 549, US Section 508) and the practical baseline for commercial websites. AAA is the higher tier intended for public-service, healthcare, and education sites where readers may include elderly or low-vision users (normal text 7:1). If your brand color cannot reach AAA without losing identity, keep AAA for body text and let AA cover decorative uses.
What counts as 'large text'? +
WCAG defines large text as bold at 14pt (18.66px) or regular at 18pt (24px). Large text has relaxed thresholds (AA 3:1, AAA 4.5:1) because the size itself improves legibility. The tool reports both tiers so you can match the result to your actual font size and weight.
What input formats does the tool accept? +
Hex (#RGB, #RRGGBB) and rgb() syntax are both accepted, plus the native color picker. The result panel offers a one-click copy as CSS custom properties (e.g. --color-text: #000000;) ready to paste into a design system or Tailwind config.