colorize
ColorKit
CK

Contrast Checker

Test your foreground and background color combinations for WCAG accessibility compliance.

Contrast Ratio

6.29 : 1

WCAG AA (Normal)PASS
WCAG AA (Large)PASS
WCAG AAA (Normal)FAIL
UI ComponentsPASS

Auto-Adjust to Pass:

Live Preview Headline

This is a subheadline that demonstrates slightly smaller text. It needs at least a 4.5:1 ratio to be considered legible under WCAG AA guidelines.

This is a standard body paragraph. Good contrast ensures that all users, including those with visual impairments, can read your content without eye strain.

UI components and borders require a 3.0:1 ratio.

What does the Contrast Checker do?

This tool calculates the mathematical contrast ratio between a text color (foreground) and a background color to determine if they are readable according to the Web Content Accessibility Guidelines (WCAG).

Who is this tool for?

It is built for web developers, UI/UX designers, and accessibility auditors who need to ensure their digital products are readable by users with visual impairments and comply with accessibility laws.

How are the contrast formulas calculated?

We process all inputs locally in your browser. The tool calculates the relative luminance of both colors and applies the standard WCAG 2.2 formula ((L1 + 0.05) / (L2 + 0.05)) to generate a ratio ranging from 1:1 (no contrast, e.g., white on white) to 21:1 (maximum contrast, e.g., black on white).

What are the WCAG AA and AAA requirements?

  • WCAG AA (Normal Text): Requires a minimum contrast ratio of 4.5:1.
  • WCAG AA (Large Text): Requires a minimum ratio of 3.0:1 for text that is 18pt or larger (or 14pt bold).
  • WCAG AAA (Normal Text): The strictest standard, requiring a massive 7.0:1 ratio.

How does the "Auto-Adjust" feature work?

If your chosen colors fail the WCAG tests, clicking our "Fix" buttons triggers a local correction algorithm. The engine converts your text color into the HSL (Hue, Saturation, Lightness) format, locks your exact Hue and Saturation in place, and systematically nudges the Lightness channel up or down by 1% increments. It recalculates the contrast every millisecond until it crosses the exact 4.5:1 or 7.0:1 threshold, instantly outputting a visually similar but legally compliant HEX code.

Knowledge Base & FAQ

Frequently Asked Questions

Direct answers and solutions to common questions, technical challenges, and industry standards.

What is the legal minimum contrast ratio for website text under ADA and WCAG?expand_more
Under WCAG 2.1 / 2.2 Level AA (the baseline legal compliance standard enforced in ADA Title III and European EN 301 549 web accessibility litigation):
  • Normal Text (< 18pt or 14pt bold): Must achieve at least a 4.5:1 contrast ratio against its background.
  • Large Text (≥ 18pt regular or 14pt bold): Must achieve at least a 3.0:1 contrast ratio.
  • UI Components & Graphical Objects: Form input borders, active focus indicators, and standalone icons must achieve at least a 3.0:1 ratio.
What is the difference between WCAG AA and WCAG AAA compliance?expand_more
WCAG AA is the global legal benchmark required for commercial e-commerce, banking, education, and public websites, requiring 4.5:1 for body copy. WCAG AAA is an enhanced standard recommended for government portals, elderly care services, and specialized medical applications, requiring a stringent 7.0:1 contrast for normal text and 4.5:1 for large headings.
Why do form placeholders and disabled buttons often fail accessibility audits?expand_more
Default browser HTML form placeholders (e.g. gray text like #9CA3AF on white inputs) frequently measure around 2.0:1 to 2.5:1, failing WCAG Level AA. Best practice: never rely on placeholders as labels. Always provide explicit visible <label> elements and style placeholder text with sufficient contrast: 
input::placeholder {
  color: #4B5563; /* Passes 4.5:1 on white */
}
While WCAG explicitly exempts inactive/disabled buttons, modern inclusive design recommends using subtle outlines or tooltips rather than low-contrast gray-on-gray.
How does the WCAG formula calculate relative luminance?expand_more
Relative luminance (L) measures the perceived brightness of a color normalized from 0.0 (darkest black) to 1.0 (lightest white). Because the human eye is most sensitive to green light, the W3C formula linearizes 8-bit sRGB gamma and weights the channels: 
L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin
The final contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker color.
Can I use pure yellow (#FFFF00) or cyan (#00FFFF) for call-to-action buttons?expand_more
Only if you pair them with dark/black text. Because pure yellow (luminance ~0.93) and cyan (luminance ~0.79) are naturally high in light intensity, pairing them with white text produces an abysmal contrast ratio between 1.07:1 and 1.25:1, making text completely invisible to users with low vision or on sunlit mobile screens. Dark text (#0F172A) on yellow achieves a massive 16.8:1 ratio, passing both AA and AAA with flying colors.