UseToolSuite UseToolSuite

Color Contrast Checker

Check WCAG 2.1 color contrast ratio between text and background colors. Instantly see AA and AAA compliance results with a live preview — free online accessibility tool.

Last updated
Live Preview

Large Text (24px bold)

Normal body text at 16px — this is how your content will look with the selected color combination. The quick brown fox jumps over the lazy dog.

Link Example
Contrast Ratio — —
— AA Normal

≥ 4.5:1 — Standard text smaller than 18pt (24px) or 14pt bold (19px)

— AA Large

≥ 3:1 — Large text 18pt (24px) or 14pt bold (19px) and above

— AAA Normal

≥ 7:1 — Enhanced contrast for maximum readability

— AAA Large

≥ 4.5:1 — Enhanced contrast for large text and UI components

What is a Color Contrast Checker?

The Color Contrast Checker is a free online tool that calculates the WCAG 2.1 contrast ratio between any two colors — a text (foreground) color and a background color. It instantly evaluates whether the combination meets WCAG AA and AAA accessibility standards for both normal text and large text. The tool accepts HEX, RGB, HSL, and CSS named color inputs with a built-in color picker for visual selection. A live preview shows exactly how your text will look, while PASS/FAIL badges give you clear, actionable results. When a color pair fails, the tool automatically suggests an adjusted color that meets AA compliance — preserving your original hue while adjusting brightness for sufficient contrast. All processing happens entirely in your browser: no data is sent to any server.

When to use it?

Use this tool whenever you choose text and background colors for a website, mobile app, or digital product. WCAG 2.1 compliance is a legal requirement under the ADA (Americans with Disabilities Act), the European Accessibility Act (EAA), and EN 301 549 — making contrast checking essential for any public-facing digital content. Check your color choices during the design phase to avoid costly retroactive fixes, during code review to validate CSS custom properties (design tokens), and during accessibility audits to ensure every page meets the minimum 4.5:1 ratio for normal text.

Common use cases

Web designers use it to verify that brand colors meet accessibility standards before building a design system. Front-end developers check button text, link colors, placeholder text, and error message colors against their respective backgrounds. Product managers use it to document color accessibility compliance for clients and stakeholders. QA engineers use it during accessibility audits to flag contrast violations before deployment. Content creators check whether their blog theme provides sufficient reading contrast for body text and headings. It is also useful for checking contrast ratios in data visualizations, charts, and infographics where color distinctions carry meaning.

Key Concepts

Essential terms and definitions related to Color Contrast Checker.

WCAG 2.1 (Web Content Accessibility Guidelines)

The international standard (W3C Recommendation) defining how to make web content accessible to people with disabilities. Published in 2018, WCAG 2.1 extends WCAG 2.0 with additional success criteria for mobile accessibility, low vision, and cognitive disabilities. Contrast requirements are defined in Success Criterion 1.4.3 (AA) and 1.4.6 (AAA). WCAG is referenced by the ADA, Section 508, the European Accessibility Act, and accessibility laws worldwide.

Relative Luminance

The relative brightness of a color on a scale from 0 (pure black) to 1 (pure white), calculated from linearized sRGB values using the formula L = 0.2126R + 0.7152G + 0.0722B. The coefficients reflect human perception: green contributes 71.52% of perceived brightness, red 21.26%, and blue only 7.22%. This is why pure green (#00FF00) appears much brighter than pure blue (#0000FF) despite having the same maximum channel value.

Contrast Ratio

A numerical value (ranging from 1:1 to 21:1) representing the difference in perceived brightness between two colors. Calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance and L2 is the darker. Black (#000000) on white (#FFFFFF) yields the maximum 21:1 ratio. The 0.05 offset accounts for ambient light reflected from the screen surface.

Large Text (WCAG Definition)

Text that is at least 18 points (24px) in regular weight, or at least 14 points (approximately 18.66px, typically rounded to 19px) in bold weight. Large text has a reduced contrast requirement (3:1 for AA, 4.5:1 for AAA) because its larger character size is inherently more legible. Note: the point-to-pixel conversion assumes 96 DPI; on higher-DPI displays, the visual size may differ but WCAG measurements use CSS pixels.

Frequently Asked Questions

What contrast ratio is required for WCAG AA compliance?

WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text (smaller than 18pt or 14pt bold) and 3:1 for large text (18pt / 24px and above, or 14pt / 19px bold and above). UI components and graphical objects also require a minimum 3:1 ratio. These thresholds ensure that text is readable for users with moderately low vision (approximately 20/40 acuity) without assistive technology.

What is the difference between WCAG AA and AAA levels?

WCAG AA is the minimum legal requirement for most regulations (ADA, EAA, EN 301 549) and requires 4.5:1 for normal text and 3:1 for large text. WCAG AAA is the enhanced level requiring 7:1 for normal text and 4.5:1 for large text — it provides the highest readability for users with more severe vision impairments. While AAA is recommended for critical content (government, healthcare, banking), full AAA compliance across an entire site is extremely difficult and not required by most regulations.

Does this tool support transparent colors or colors with alpha?

This tool evaluates opaque colors. For semi-transparent text or backgrounds, the effective contrast depends on the layers behind the transparent color. To check contrast with transparency, composite the transparent color onto the actual background first (blend the alpha manually), then enter the resulting opaque color into this tool. For example, rgba(0, 0, 0, 0.7) on a white background composites to approximately rgb(77, 77, 77).

Can I use this tool for non-web design like mobile apps or print?

Yes. WCAG contrast ratios are based on relative luminance and apply to any visual medium — web, iOS, Android, desktop apps, PDF documents, and even printed materials. The same 4.5:1 and 7:1 thresholds apply regardless of the platform. For mobile apps, Apple's Human Interface Guidelines and Google's Material Design both reference WCAG contrast ratios as the baseline for accessible text.

Troubleshooting & Technical Tips

Common errors developers encounter and how to resolve them.

Colors pass the checker but still look hard to read on screen

WCAG contrast ratios measure luminance difference, not perceptual readability. Several factors can make text hard to read even at sufficient contrast: thin font weight (use ≥400 for body text), small font size (use ≥16px for body), anti-aliasing differences between macOS (subpixel smoothing) and Windows (ClearType), and display calibration. Additionally, certain color combinations (e.g., saturated blue text on black) can cause chromatic aberration in human vision. Best practice: meet the mathematical ratio AND visually verify readability on multiple devices.

Different contrast checker tools give slightly different ratios

Contrast ratio calculation requires converting sRGB values to linear RGB using a gamma transfer function, then computing relative luminance. Rounding differences at each step can cause variations of ±0.01–0.05 in the final ratio. This tool uses the exact WCAG 2.1 algorithm: linearize each channel with the piecewise sRGB transfer function (threshold at 0.04045), compute L = 0.2126R + 0.7152G + 0.0722B, then ratio = (L1 + 0.05) / (L2 + 0.05). Small differences between tools are normal and do not affect pass/fail outcomes for ratios near the threshold.

Brand colors fail WCAG contrast requirements

When brand primary colors fail contrast checks, do NOT change the brand color itself. Instead: (1) use the brand color only for large text, decorative elements, or interactive states where 3:1 is sufficient; (2) use a darker/lighter variant of the brand color for body text — shift lightness in HSL while preserving hue; (3) pair the brand color with a sufficiently contrasting background (this tool's suggestion feature does this automatically). Document the accessible variants in your design tokens so developers always use the correct shade.

Related Guides

In-depth articles covering the concepts behind Color Contrast Checker.

HEX vs RGB vs HSL: Which Color Format Should You Use?

A practical comparison of HEX, RGB, HSL, and modern OKLCH color formats in CSS. Includes conversion formulas, design system examples, accessibility considerations, and browser support tables.

Related Tools

Color Converter

Color & CSS Tools

Color Palette Generator

Color & CSS Tools

CSS Gradient Generator

Color & CSS Tools

Box Shadow Generator

Color & CSS Tools