Free Color Tool
Free WCAG Contrast Checker — AA & AAA with Live Text Preview
Check whether any text and background color combination passes WCAG AA and AAA accessibility standards. Adjust font size and weight, preview real text, and get automatic suggestions for passing alternative colors.
How to use the Contrast Checker
Using this tool takes under a minute. Furthermore, no account is needed and no data is sent to any server.
Paste HEX codes for your text (foreground) and background colors, or use the color pickers to select visually. Furthermore, the contrast ratio and pass/fail results update immediately.
Set the font size in pixels and choose normal or bold weight. Furthermore, WCAG defines different thresholds for large text (≥18pt or ≥14pt bold) versus normal text, so these settings affect which level your combination passes.
The preview panel shows actual text in your chosen colors and sizes. Furthermore, this lets you confirm the visual appearance directly rather than interpreting a ratio number in isolation.
Three badges show whether your combination passes WCAG AA for normal text (4.5:1), WCAG AAA for normal text (7:1) and WCAG AA for large text or UI components (3:1). Moreover, the ratio value turns green when AA passes and red when it fails.
If AA fails, the tool suggests the nearest passing versions of your text color — a slightly darker or lighter variant. Furthermore, clicking any suggestion automatically updates the text color input and recalculates.
How contrast ratio is calculated
The WCAG contrast ratio formula is defined in the W3C Web Content Accessibility Guidelines specification. It divides the relative luminance of the lighter color (plus 0.05) by the relative luminance of the darker color (plus 0.05), producing a ratio from 1:1 (no contrast) to 21:1 (black on white). Furthermore, the 0.05 constant is added to prevent division by zero for pure black.
Relative luminance is a linear measure of light emitted. It is calculated by first converting each RGB channel from the sRGB gamma-encoded space to a linear value, then weighting the channels by their contribution to human luminosity perception: L = 0.2126×R + 0.7152×G + 0.0722×B. Furthermore, these weights reflect the fact that the human eye is most sensitive to green and least sensitive to blue.
The WCAG thresholds differ by text size because larger text is easier to read at lower contrast. Normal text requires a contrast ratio of at least 4.5:1 for AA and 7:1 for AAA. Furthermore, large text (18pt or 14pt bold) requires only 3:1 for AA and 4.5:1 for AAA. UI components and graphical objects also require a minimum 3:1 ratio against adjacent colors.
Example: checking a design system primary button
The following example walks through a realistic scenario step by step. Furthermore, it shows what output to expect from a typical use case.
A design system uses white text (#FFFFFF) on a primary green button (#1D9E75). The designer checks this in the contrast checker.
The calculated contrast ratio is 3.87:1. Furthermore, this passes WCAG AA for large text and UI components (≥3:1) but fails WCAG AA for normal text (needs ≥4.5:1).
The tool suggests a darker green (#0D5C44) as an alternative that passes AA for normal text with a ratio of 6.11:1. Moreover, the live preview confirms the darker green maintains the brand feel while being suitable for body-size text on the button.
For the standard button which uses 14px normal-weight text, the designer switches to #0D5C44. Furthermore, they retain #1D9E75 for icon-only buttons and decorative elements where the 3:1 UI component threshold applies.
What is WCAG contrast ratio and why does it matter?
The Web Content Accessibility Guidelines (WCAG) are a set of internationally recognised standards for web accessibility developed by the W3C. The contrast ratio requirement (WCAG Success Criterion 1.4.3) specifies that text must have a minimum contrast ratio against its background in order to be readable by people with low vision. Furthermore, WCAG compliance is a legal requirement for public-sector websites in many countries including the UK, EU, USA and Australia.
Contrast ratio is a measure of the difference in luminance between a foreground and background color. A ratio of 1:1 means the colors are identical — no contrast at all. A ratio of 21:1 is the maximum, achieved only by pure black on pure white. Furthermore, the human visual system can generally read text comfortably at 4.5:1 or above, though users with low vision benefit significantly from higher ratios.
WCAG 2.1 defines three levels: A (minimum), AA (standard) and AAA (enhanced). Level AA is the most widely adopted compliance target and requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Furthermore, Level AAA requires 7:1 for normal text — a standard more appropriate for text-heavy content such as legal documents, academic papers and news articles.
What counts as large text under WCAG?
WCAG defines large text as 18pt (24px) or larger at normal weight, or 14pt (approximately 18.67px) or larger at bold weight. Furthermore, text that meets either of these size thresholds requires only a 3:1 contrast ratio for WCAG AA compliance, compared to 4.5:1 for normal-sized text.
Does contrast ratio apply to images and icons?
Yes. WCAG 1.4.11 (Non-text Contrast) requires that UI components — including icon boundaries, form input borders and focus indicators — have a minimum 3:1 contrast ratio against adjacent colors. Furthermore, informational graphics and data visualisation elements that convey meaning must also meet the 3:1 threshold.
Why WCAG contrast checking is essential before launch
Accessibility failures are often invisible during development because designers and developers typically have good vision and use high-quality displays. Furthermore, users with low vision, cataracts, or those reading on low-brightness mobile screens in daylight will experience color contrast very differently. Checking contrast ratios during design — not as an afterthought — prevents costly remediation work after launch.
WCAG compliance is increasingly a legal obligation. The Americans with Disabilities Act (ADA) has been applied to web accessibility by US courts. The European Accessibility Act (EAA) mandates AA compliance for commercial digital services from 2025. Furthermore, public sector websites in the UK (PSBAR 2018) and across the EU must meet AA standards.
The business case extends beyond compliance. High-contrast designs are easier to read on glossy phone screens outdoors, for older users whose visual acuity decreases with age, and for users in high-stress situations where cognitive load reduces attention. Moreover, contrast-aware design systems are simply better designs — clarity is a fundamental dimension of quality.
Frequently asked questions
Related color tools
Every tool in this collection runs entirely in your browser. Furthermore, all tools are free to use with no account required.
Brand Color Finder
Find the exact hex colors used by 869+ global and regional brands. Furthermore, search by color to discover which brands use that hue.
Color Converter
Convert any color between 8 formats: HEX, RGB, HSL, CMYK, HSB and more. Additionally, all values update instantly.
Color Name Finder
Find the nearest named color for any hex value. Furthermore, see both the CSS name and the designer name side by side.
Colour Blindness Simulator
Simulate how any color appears across all 8 types of color vision deficiency. Moreover, see before-and-after swatches instantly.
CSS Colour Namer
Find the nearest CSS named color for any hex input. Additionally, get a suggested CSS variable name and copy-ready code snippet.
CSS Gradient Builder
Build linear, radial or conic gradients visually. Furthermore, choose from 60+ mood-based presets and copy the CSS instantly.
Palette Generator
Generate a 5-color palette using 7 harmony rules. Moreover, see inline WCAG contrast scores for every color pair.
Tint & Shade Generator
Generate Tailwind-compatible tints and shades for any color. Additionally, export as CSS custom properties in one click.