Check if your text and background color combination meets WCAG AA and AAA accessibility standards. See contrast ratio and live preview.
Text Color
Background Color
The quick brown fox jumps over the lazy dog
Normal body text at 16px. Accessibility matters for everyone.
Small text at 12px - often used for captions, footnotes, and labels.
Contrast Ratio
-
:1
WCAG AA - Normal Text
-
Requires ≥ 4.5:1
WCAG AA - Large Text
-
Requires ≥ 3:1
WCAG AAA - Normal Text
-
Requires ≥ 7:1
WCAG AAA - Large Text
-
Requires ≥ 4.5:1
Level
Text Size
Minimum Ratio
Result
WCAG AA
Normal text (< 18pt / 14pt bold)
4.5 : 1
-
WCAG AA
Large text (≥ 18pt / 14pt bold)
3 : 1
-
WCAG AAA
Normal text
7 : 1
-
WCAG AAA
Large text
4.5 : 1
-
About Color Contrast Checker
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for text to ensure readability for people with visual impairments. This tool calculates the relative luminance of two colors and computes the contrast ratio according to the WCAG 2.1 formula.
WCAG Contrast Levels Explained
AA (minimum) - 4.5:1 for normal text, 3:1 for large text (≥ 18pt or bold ≥ 14pt). Required for most websites. AAA (enhanced) - 7:1 for normal text, 4.5:1 for large text. Recommended for the best accessibility.
Frequently Asked Questions
WCAG stands for Web Content Accessibility Guidelines. They are published by the W3C and define how to make web content more accessible to people with disabilities, including those with low vision or color blindness.
WCAG defines large text as text that is at least 18pt (24px) in normal weight, or at least 14pt (18.67px) in bold weight. Headings typically qualify as large text; body copy usually does not.
The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance is computed from linearized RGB values using the WCAG 2.1 formula.
AA is the minimum standard required by most accessibility laws and guidelines (including WCAG 2.1 Level AA compliance). AAA is the enhanced level and is recommended but not always required. Aim for AA as a baseline, and AAA where feasible.
About Color Contrast Checker — Color Contrast Checker Online & WCAG Contrast Checker
This free color contrast checker online calculates the contrast ratio between any two colors and instantly shows whether the combination passes or fails WCAG 2.1 accessibility standards at the AA and AAA levels. Enter your foreground (text) color and background color using the color picker or hex input, and the tool displays the contrast ratio, four WCAG pass/fail results for normal and large text, and a live preview showing how your text will actually appear to users. As a WCAG contrast checker, it covers all four compliance thresholds defined in WCAG 2.1 Success Criterion 1.4.3.
Web designers, front-end developers, and accessibility auditors use a color contrast checker as a standard step in every UI design review. Poor color contrast is one of the most common accessibility failures on the web and affects users with low vision, color blindness, and anyone viewing a screen in bright ambient light. Making color choices that meet WCAG AA requirements is often a legal obligation under accessibility laws including the ADA in the US, EN 301 549 in Europe, and equivalent laws in many other countries.
How to Use the Color Contrast Checker
Choose your Text Color (foreground) using the color picker on the left side of the tool, or type a hex code such as #1e293b in the hex input field and click Apply.
Choose your Background Color using the color picker on the right, or enter a hex value and click Apply. Both colors can be any valid 6-digit hex color.
The Contrast Ratio updates instantly — a ratio of 21:1 is the maximum (black on white) and 1:1 is no contrast (same color on same color).
Check the four WCAG result cards: AA Normal Text requires ≥ 4.5:1, AA Large Text requires ≥ 3:1, AAA Normal Text requires ≥ 7:1, and AAA Large Text requires ≥ 4.5:1.
Review the live preview panel to see how your color combination looks with heading, body, and small text rendered at actual sizes.
WCAG Contrast Levels Explained
WCAG 2.1 defines two levels of contrast compliance. Level AA is the minimum standard required by most accessibility laws and guidelines. For normal-weight text smaller than 18pt (24px) or bold text smaller than 14pt (18.67px), AA requires a contrast ratio of at least 4.5:1. For large text (18pt normal or 14pt bold and above), AA requires at least 3:1. Level AAA is the enhanced standard: 7:1 for normal text and 4.5:1 for large text. AAA is aspirational in most projects but provides the best experience for users with severe low vision.
Tips for Getting the Best Results
Test both light and dark mode: If your site supports dark mode, check contrast for both color scheme variants. A color pair that passes in light mode may fail in dark mode if the inverted colors have different relative luminance values.
Use large text strategically: Large text (18pt+ or bold 14pt+) only requires a 3:1 contrast ratio for AA compliance. If a color pair fails the 4.5:1 requirement for normal text, consider using it only for headings and large UI elements where the lower threshold applies.
Aim for AA as the baseline, AAA where feasible: Most design systems and accessibility audits require AA compliance. AAA compliance is difficult to achieve while maintaining good aesthetics, but it is worth pursuing for primary body text and critical UI elements used by a wide audience.
Check interactive states too: Verify contrast for all interactive states — default, hover, focus, active, and disabled. Disabled elements are exempt from contrast requirements in WCAG, but active interactive elements must meet the standard in all their states.
Do not rely on color alone: Contrast ratio measures luminance difference, not hue difference. Even a passing ratio does not mean the color pair works for users with specific types of color blindness. Use additional visual indicators such as underlines, icons, or patterns alongside color to convey meaning.
Why Use a Color Contrast Checker Online
A browser-based color contrast checker online gives designers and developers instant feedback without switching to a desktop application or browser extension. Because the tool loads in any browser, it is accessible on any device — ideal for reviewing designs on a tablet, checking work on a client's laptop, or auditing color choices during a remote design review call. All computation runs locally, so no color data is transmitted to a server.
UX designers use this WCAG contrast checker during the design phase to select accessible color palettes before development begins. Front-end developers use it to verify that implemented colors match the design's accessibility intentions. QA engineers and accessibility auditors use it during compliance testing to document pass/fail results. Product teams at companies subject to accessibility regulations use it as part of their definition of done for every UI component that involves text on a colored background.
Frequently Asked Questions about Color Contrast Checker
WCAG stands for Web Content Accessibility Guidelines, a set of international standards published by the W3C to make web content accessible to people with disabilities. Contrast ratio matters because users with low vision, cataracts, or color blindness may not be able to distinguish text from its background if the contrast is insufficient. WCAG defines minimum contrast ratios to ensure text is readable by the widest possible audience, including those with visual impairments.
WCAG 2.1 defines large text as text that is at least 18 points (approximately 24 pixels) in normal weight, or at least 14 points (approximately 18.67 pixels) in bold weight. Headings typically qualify as large text; standard body paragraphs do not. Large text has a lower minimum contrast requirement — 3:1 for AA and 4.5:1 for AAA — because larger characters are easier to distinguish even at lower contrast levels.
The contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance is computed from linearized sRGB values using the WCAG 2.1 formula: each RGB channel is normalized to 0–1, gamma-corrected, and then combined using the weights 0.2126 (red), 0.7152 (green), and 0.0722 (blue) to reflect human perception of brightness.
WCAG AA is the minimum standard required by most accessibility laws and organizational policies, including the Americans with Disabilities Act (ADA) web guidelines, Section 508, and EN 301 549 in Europe. AAA provides a significantly better experience for users with severe low vision but is difficult to achieve while maintaining visually appealing designs. Target AA as your baseline for all UI text and pursue AAA for primary body content where feasible.
This tool checks text contrast ratios as defined in WCAG 2.1 Success Criterion 1.4.3. Non-text contrast — such as icons, charts, input borders, and UI component boundaries — falls under WCAG 2.1 Success Criterion 1.4.11, which requires a 3:1 minimum ratio for AA. This tool can be used to check non-text element contrast by treating one color as the element color and the other as the adjacent background, but it does not automate this process specifically.
This tool currently accepts 6-digit hex color codes (e.g., #1e293b) and colors chosen via the browser's native color picker, which handles any color the browser supports. If you have an RGB, HSL, or other format color, convert it to hex first using any color converter tool before entering it here. Most design tools including Figma, Adobe XD, and Sketch display hex codes alongside other formats in their color panels.
The contrast ratio formula has a maximum of 21:1, which represents the highest possible contrast — pure black (#000000) on pure white (#FFFFFF) or vice versa. White has a relative luminance of 1.0 and black has a relative luminance of 0.0, giving a ratio of (1.0 + 0.05) / (0.0 + 0.05) = 21. This combination passes all WCAG levels by a wide margin and is often used as a benchmark when evaluating other color pairs.
Yes. All contrast ratio calculations run entirely in your browser using JavaScript. No color values, hex codes, or any other data are sent to any server. The tool works completely offline once the page has loaded, making it safe and private to use with proprietary brand colors, client color palettes, or any other color data that should not leave your device.