Color Contrast Checker
Ensure your color combinations meet WCAG accessibility standards
Examples
White on black — the maximum contrast
Foreground: #FFFFFF · Background: #000000Contrast ratio: 21:1
AA: Pass · AAA: PassThe luminance difference between white and black yields the theoretical maximum of 21:1 — both WCAG AA and AAA pass for any text size.
#777 on #FFF — a common subtle gray that fails AAA
Foreground: #777777 · Background: #FFFFFFContrast ratio: 4.48:1
AA: Fail · AAA: Fail4.48 is below the 4.5 AA threshold for normal text, so gray text on white fails AA. Lighten the foreground or darken the background until the ratio is at least 4.5.
Tailwind blue-500 on white — fails AA, OK for large text
Foreground: #3B82F6 · Background: #FFFFFFContrast ratio: 3.68:1
AA Normal: Fail · AA Large: Pass3.68 is below the 4.5 normal-text threshold but above the 3.0 large-text threshold. Use the blue only for headings, buttons, or non-text UI elements.
Accessible link blue on white
Foreground: #0066CC · Background: #FFFFFFContrast ratio: 5.57:1
AA: Pass · AAA: Fail5.57 clears the 4.5 AA bar for normal text and is a safe choice for body links. The same color falls just short of AAA's 7:1 floor.
About this tool
The Color Contrast Checker verifies that a foreground/background color pair satisfies WCAG 1.4.3 Contrast (Minimum) and 1.4.6 Contrast (Enhanced). The contrast ratio is computed from the relative luminance of each color using the standard sRGB transfer function, then compared against the 4.5:1 (AA), 7:1 (AAA), 3:1 (large-text AA), and 4.5:1 (large-text AAA) thresholds.
Three text-size contexts are supported — normal text, large text (18pt or 14pt bold), and UI components — each with its own threshold. The ratio is rounded to two decimal places for display but the comparison uses the unrounded value, so the badge matches what assistive tooling actually reports.
A color-blindness simulation panel previews the same pair under protanopia, deuteranopia, and tritanopia using the standard Brettel/Viénot/Mollon transform matrices. Everything runs in your browser — no color, image, or sample text is uploaded.
How to use
Pick two colors
Enter the foreground (text) and background colors using the hex input or the native color picker. The pair updates the ratio and the WCAG badges in real time.
Choose the text-size context
Select Normal Text (16px), Large Text (18px+), or UI Components. The AA threshold drops to 3:1 for large text and UI components, matching WCAG 1.4.3 and 1.4.11.
Read the ratio and badges
The ratio display shows the value to one decimal place; the AA and AAA badges pass or fail against the threshold for the selected context.
Run the color-blindness preview
Toggle the color-blindness simulation to see the same pair as it would appear under protanopia, deuteranopia, and tritanopia, with a per-condition badge.
Use cases
Auditing a design system
Run every foreground/background pair from the design tokens through the checker and record the smallest ratio in each family so the design system ships only accessible combinations.
Picking link and button colors
Body copy needs a 4.5:1 ratio; interactive elements need 3:1 against the surrounding background. Use the checker to settle on a brand color that passes both.
Validating a dark theme
Pure white on pure black can feel harsh — explore #FFFFFF on #1F2937 (Tailwind slate-800) and similar dark-mode backgrounds to find a softer pair that still passes AAA.
Diagnosing a "contrast is too low" Lighthouse warning
Paste the offending colors into the checker, sort by size context, and confirm whether the fail is for normal text or only for the smaller copy where the threshold is stricter.
Common mistakes
Mistake:Using a brand color for body text without first checking the ratio.
Fix:Run the combination through the checker before shipping. Most primary brand colors fail WCAG AA on white — choose a darker shade or restrict the brand color to large headings and UI components.
Mistake:Assuming large-text ratios apply to body copy.
Fix:The 3:1 threshold applies only to text 18pt (24px) or 14pt bold (18.66px). Anything smaller needs 4.5:1 for AA and 7:1 for AAA, regardless of how visually prominent it looks.
Mistake:Ignoring color-blindness and assuming visual contrast equals accessibility.
Fix:Two colors that pass WCAG contrast can still be indistinguishable for someone with red-green color blindness. Enable the color-blindness simulation panel to preview the pair under protanopia, deuteranopia, and tritanopia.
Mistake:Trusting the rounded 2-decimal ratio from the UI badges.
Fix:The badges compare the live ratio against the threshold, but rounding errors can flip a near-miss — always read the displayed ratio and treat values within 0.1 of the threshold as marginal.
Mistake:Checking once per asset and never again after a design change.
Fix:Add a contrast check to the design-review checklist. A token swap that updates background or text color across the site is a single change but invalidates every pair that uses it.
Frequently asked questions
Related guides
Understanding WCAG Color Contrast (With Examples)
What WCAG color contrast ratios mean, the AA and AAA thresholds, how the ratio is computed from relative luminance, and how to fix text that fails accessibility checks.
HEX, RGB, HSL, and LCH: A Developer's Guide to CSS Colors
The four ways CSS lets you write a color, what each one is good at, and why HSL feels intuitive while LCH solves the gamut problems everyone trips over.
References & standards
Related tools
Color Blindness Simulator
Simulate color blindness on palettes and images. Compare protanopia, deuteranopia, tritanopia, and more side-by-side.
Color Converter
Convert colors between multiple formats (HEX, RGB, HSL, HSV, CMYK, LAB) with color blindness simulation, named colors, and batch processing
Color Extractor
Extract colors from uploaded images by hovering over pixels to get precise color values.
Color Generator
Generate color palettes, analyze colors, and create gradients with this comprehensive color tool.
Color Mixer
Blend two colors together by any ratio. See intermediate steps and copy the result in HEX, RGB, or HSL.
Color Names Finder
Look up CSS color names or find the closest named colors to any hex value.