WCAG Contrast Checker
Test foreground/background color pairs against WCAG AA and AAA contrast thresholds
Sample Text
The quick brown fox jumps over the lazy dog.
Small text preview for readability testing.
Contrast Ratio
21.00:1
WCAG AA
WCAG AAA
Try these next
Why use WCAG Color Contrast Checker
- Tests AA and AAA for normal text, large text, and UI components in one view.
- Live text preview renders your foreground on your background so you see readability, not just a number.
- Suggests nearby color adjustments when a pair fails, preserving hue while shifting lightness.
- Accepts HEX, RGB, and HSL -- whichever format your design system already uses.
- Results in under a second. No account, no install.
How it works
The checker computes the WCAG 2.1 contrast ratio using relative luminance. Each color's sRGB channels (0-255) are first normalized to the 0-1 range, then linearized by applying the sRGB transfer function: values at or below 0.04045 are divided by 12.92, and values above are transformed with ((value + 0.055) / 1.055) ^ 2.4. Relative luminance is the weighted sum 0.2126R + 0.7152G + 0.0722B, reflecting the human eye's greater sensitivity to green light. The contrast ratio is (L_lighter + 0.05) / (L_darker + 0.05), yielding a value between 1:1 (identical colors) and 21:1 (black on white). The tool compares this ratio against four thresholds: 3:1 (AA large text and UI), 4.5:1 (AA normal text and AAA large text), and 7:1 (AAA normal text). When a pair fails, the tool incrementally adjusts the darker color's lightness downward and the lighter color's lightness upward until the target ratio is met, then presents those alternatives.
About this tool
Does that grey text on your white background actually pass WCAG AA? Enter two colors and find out in under a second. The tool calculates the exact contrast ratio using the WCAG 2.1 relative luminance formula and shows pass/fail for AA and AAA at normal text, large text, and UI component thresholds. A live preview renders your text on the chosen background at multiple font sizes so you can judge readability visually, not just by the numbers. When a combination fails, the tool suggests nearby adjustments -- it preserves the hue and shifts lightness just enough to clear the threshold, so your design stays close to the original intent. Roughly 1 in 12 men have some form of color vision deficiency. That's not a niche audience. If your site serves more than a few hundred users, contrast compliance isn't optional -- it's a legal requirement in many jurisdictions (ADA, Section 508, European Accessibility Act).
How to use WCAG Color Contrast Checker
- Enter the foreground color. Paste a hex, RGB, or HSL value, or use the color picker for your text color.
- Enter the background color. Do the same for the background. The ratio updates in real time.
- Read the verdict. See the exact ratio plus pass/fail for AA normal, AA large, AAA normal, AAA large, and UI components.
- Fix failures. If a pair fails, check the suggested adjustments. The tool shifts lightness just enough to pass while preserving your hue.
Use cases
- You're reviewing a PR that changes button colors. Check whether the new foreground/background pair passes AA before approving.
- A designer presenting a brand color system to a government client needs to prove every combination meets WCAG 2.1 AA.
- You chose a softer grey for placeholder text. Check the contrast ratio, discover it fails 3:1 for large text, pick a darker shade.
- An accessibility audit of a competitor's product requires documenting exact contrast failures per UI element. Enter the hex values, record the ratios.
- Dark mode passed last quarter, but a recent redesign changed the accent colors. Recheck every text/background pair in the new palette.
- You're arguing with a designer about whether light grey on white is readable. Paste both hex codes, show the number, end the debate.
Frequently Asked Questions
WCAG (Web Content Accessibility Guidelines) color contrast refers to the difference in luminance between foreground text and its background. Higher contrast makes text easier to read, especially for people with low vision or color vision deficiencies. WCAG defines specific minimum contrast ratios that websites must meet for accessibility.
WCAG Level AA requires a contrast ratio of at least 4.5:1 for normal text (under 18pt or 14pt bold) and at least 3:1 for large text (18pt and above, or 14pt bold and above). Non-text UI components like form borders, icons, and focus indicators also require a 3:1 minimum contrast ratio.
WCAG Level AA is the standard compliance level that most organizations target. Level AAA is the highest and most stringent level, requiring 7:1 contrast for normal text and 4.5:1 for large text. AAA is recommended but not required in most regulations because it significantly limits color choices.
Contrast ratio is calculated using the relative luminance of two colors. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter color and L2 is the luminance of the darker color. Luminance is derived from sRGB color values using a specific gamma correction formula defined in WCAG 2.1.
Large text is defined as 18 points (24px) or larger for regular weight, or 14 points (approximately 18.66px) or larger for bold weight. Large text has a lower minimum contrast requirement (3:1 for AA, 4.5:1 for AAA) because bigger characters are inherently easier to read.
Check the contrast ratio at the lowest-contrast point of the gradient -where the background color is closest to the text color. If the text passes at the worst point, it passes everywhere. For complex backgrounds (images, patterns), ensure the text has a solid background container or sufficient text shadow.
In many jurisdictions, yes. The ADA (Americans with Disabilities Act) in the US, the Equality Act in the UK, and the European Accessibility Act all reference WCAG as the standard for web accessibility. Government websites typically must meet WCAG 2.1 AA. Private sector requirements vary by jurisdiction and industry.
To improve contrast, darken the darker color or lighten the lighter color. Small adjustments often suffice -increasing the lightness difference by 10–15% can move a failing ratio to passing. This tool suggests nearby color values that meet the required ratio while staying as close as possible to your original design.
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. AA is the legal minimum in most jurisdictions and the standard most teams target. AAA is aspirational -it's recommended for text that must be readable by people with severe low vision, but it's acknowledged that meeting AAA for all content is not always possible.
Yes. WCAG 1.4.11 (Non-text Contrast) requires a 3:1 contrast ratio for UI components and graphical elements that convey information -including icon buttons, form field borders, and focus indicators. This is a separate requirement from text contrast and is part of WCAG 2.1 AA.
Dark mode color schemes often use lighter, more saturated hues on dark backgrounds that naturally produce higher contrast ratios. Light mode designs sometimes use soft, low-contrast greys or pastels that look elegant but fall below 4.5:1. Always check both modes independently, as a color combination that passes in one mode may fail in the other.
Related Tools
Discover more free utilities to enhance your productivity.
Color Palette Generator
Build color palettes using six harmony modes and export to CSS or Tailwind
Hex to RGB Color Converter
Convert between hex, RGB, and HSL color codes
CSS Gradient Generator
Build linear and radial CSS gradients with a visual editor
Meta Tag Generator
Generate title, description, Open Graph, and Twitter Card tags from one form