liminfoColor Contrast Checker
Free web tool: Color Contrast Checker
Preview Text (24px Bold)
Preview Text (16px Normal)
Preview Text (12px Small)
Contrast Ratio
21.00:1
AA Normal Text
Min 4.5:1
AA Large Text (18pt+)
Min 3:1
AAA Normal Text
Min 7:1
AAA Large Text (18pt+)
Min 4.5:1
About Color Contrast Checker
The Color Contrast Checker calculates the WCAG 2.1 contrast ratio between any two colors — a foreground (text) color and a background color — and evaluates whether the combination passes each of the four WCAG compliance levels: AA Normal Text (≥4.5:1), AA Large Text (≥3:1), AAA Normal Text (≥7:1), and AAA Large Text (≥4.5:1). A live text preview renders sample text in three sizes (24px bold, 16px normal, 12px small) using exactly the chosen colors, so you can see the readability before writing a single line of code.
Front-end developers, UX designers, accessibility auditors, and product teams use this tool when designing button styles, typography systems, form labels, navigation menus, or any UI element that contains text on a colored background. WCAG 2.1 Success Criterion 1.4.3 requires a minimum contrast ratio of 4.5:1 for all normal text and 3:1 for large text in products targeting AA compliance — the baseline required by EN 301 549 (EU), Section 508 (US), and many national accessibility regulations.
Technically, the checker converts both hex values to linearized relative luminance using the IEC 61966-2-1 sRGB gamma function and the luminance coefficients specified in WCAG (0.2126 R, 0.7152 G, 0.0722 B). The contrast ratio formula is (L_lighter + 0.05) / (L_darker + 0.05), where L values are relative luminance between 0 (black) and 1 (white). Both color inputs include a native color picker alongside the hex text field for quick visual color selection. All calculations are performed in real time using React useMemo.
Key Features
- Foreground and background color inputs with hex text field and native color picker
- Live text preview showing 24px bold, 16px normal, and 12px small text in chosen colors
- Contrast ratio display as a decimal (e.g., 7.54:1) for precise reference
- Four WCAG compliance checks: AA Normal, AA Large, AAA Normal, AAA Large with PASS/FAIL badges
- Minimum ratio threshold shown for each compliance level for educational reference
- Real-time recalculation using WCAG sRGB luminance formula — results update as you type
- 100% client-side processing — no data is sent to any server
- Dark mode compatible and responsive across mobile, tablet, and desktop
Frequently Asked Questions
What is WCAG color contrast?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and its background to ensure readability for people with low vision or color perception differences. The contrast ratio is calculated from the relative luminance of the two colors and ranges from 1:1 (no contrast) to 21:1 (black text on white background).
What contrast ratio do I need to pass WCAG AA?
For WCAG AA compliance, normal-size text (below 18pt regular or 14pt bold, roughly 24px) requires a minimum contrast ratio of 4.5:1. Large text (18pt or larger, or 14pt bold and larger — approximately 24px bold or 18.67px regular) requires only 3:1. WCAG AA is the most commonly required level for web and mobile accessibility.
What is WCAG AAA and when should I aim for it?
WCAG AAA is the highest accessibility level, requiring 7:1 for normal text and 4.5:1 for large text. It is recommended for text that must be accessible to users with severely reduced vision or in high-stakes contexts (e.g., government portals, healthcare). Note that AAA compliance for all text on a page is often impractical for colorful designs.
How is the contrast ratio computed?
Each hex color is first converted to relative luminance L: each RGB channel (0–255) is normalized to 0–1, linearized from the sRGB gamma curve, and then combined as L = 0.2126×R + 0.7152×G + 0.0722×B. The contrast ratio is then (max(L1, L2) + 0.05) / (min(L1, L2) + 0.05). The +0.05 offset prevents division by zero for pure black.
What is "large text" in WCAG terms?
WCAG defines large text as 18 point (24px) or larger for regular weight, or 14 point (approximately 18.67px) or larger for bold weight. In practice this means headings (h1–h3 at typical sizes) and large UI labels usually qualify as large text, while body copy and captions do not. The large text threshold has a lower required contrast ratio (3:1 for AA).
My colors fail WCAG AA — how do I fix it?
The most straightforward fix is to darken the foreground color or lighten the background (or vice versa for dark-mode designs). Increasing the luminance difference between the two colors raises the contrast ratio. This tool lets you adjust the hex values and immediately see the new ratio so you can iterate quickly.
Does this tool work for dark mode contrast checking?
Yes. Simply enter your dark-mode background color in the Background field and your intended text color in the Foreground field. The tool calculates the contrast ratio and WCAG results the same way regardless of whether the background is light or dark. You may want to check both light and dark mode combinations separately.
Can I check non-text elements like icons or UI borders?
WCAG Success Criterion 1.4.11 (Non-text Contrast) requires a minimum 3:1 contrast ratio for user interface components (buttons, form inputs) and graphical objects (icons, charts) against adjacent colors. You can use this tool for that check by entering the colors of the component and its adjacent background. Note that the standard text contrast criteria (1.4.3) do not apply to non-text elements.