Color Contrast Checker

Last updated:

Check your color combinations against WCAG 2.2 accessibility standards. See the contrast ratio, AA/AAA compliance for normal and large text, and get auto-suggested accessible alternatives. 100% client-side, instant, free.

RGB(30, 41, 59)
RGB(255, 255, 255)
12.63:1
Contrast Ratio
AA Normal Text
≥ 4.5:1
✅ Pass
AA Large Text
≥ 3:1
✅ Pass
AAA Normal Text
≥ 7:1
✅ Pass
AAA Large Text
≥ 4.5:1
✅ Pass
UI Components
≥ 3:1
✅ Pass

Live Preview

Normal text looks like this at 16px. Check readability across different sizes and weights.

Large text at 24px is easier to read.

Bold 14pt+ text also qualifies as large.

Small text at 12px is hardest to read.

How the Color Contrast Checker Works

This tool evaluates color accessibility using the WCAG 2.2 algorithm:

  1. Enter two colors, use the color picker or type hex codes for your foreground (text) and background colors. The tool updates in real time as you adjust.
  2. Contrast ratio calculation, the tool calculates the relative luminance of both colors and computes the contrast ratio using the WCAG formula: (L1 + 0.05) / (L2 + 0.05).
  3. WCAG compliance check, the ratio is tested against five criteria: AA Normal (4.5:1), AA Large (3:1), AAA Normal (7:1), AAA Large (4.5:1), and UI Components (3:1).
  4. Live preview, see your colors in action with sample text at different sizes (normal, large, bold, small) to visually confirm readability.
  5. Auto-suggestion, if your colors fail any WCAG level, the tool suggests the closest accessible foreground color by adjusting lightness while preserving hue and saturation.

Why Color Contrast Matters for Web Accessibility

Color contrast is one of the most fundamental, and most commonly violated, web accessibility requirements:

  • 1 in 12 men are color blind, approximately 8% of males and 0.5% of females have some form of color vision deficiency. Low contrast makes your content unreadable for millions of potential visitors.
  • Accessibility requirements, a passing color pair addresses a contrast criterion, not a whole-site audit or legal compliance. Requirements depend on jurisdiction and service; see the European Accessibility Act scope.
  • Mobile and outdoor readability, even users with perfect vision struggle with low-contrast text on mobile devices in bright sunlight. Good contrast benefits all users in all conditions.
  • Usability and QA, automated tools such as Lighthouse can flag some contrast failures. Contrast is separate from Core Web Vitals, and a passing color pair alone does not establish accessibility conformance.
  • Brand trust and professionalism, accessible design signals that you care about all users. It builds trust, reduces bounce rates, and improves overall user experience metrics.

Use our HTML accessibility pre-check to screen additional server-rendered markup patterns. It is not a browser, keyboard, screen-reader, or conformance audit. Also check what fonts your site loads, because text size and weight affect which contrast threshold applies, and review the page at mobile sizes and in realistic lighting.

WCAG 2.2 Contrast Requirements at a Glance

Quick reference for the contrast ratios you need to hit:

Content type AA (minimum) AAA (enhanced)
Normal text
under 18pt / 24px		 4.5:1 7:1
Large text
18pt+/24px+, or 14pt+/18.66px+ bold		 3:1 4.5:1
UI components & graphics
icons, inputs, focus rings		 3:1 3:1

AA is the legal baseline in most jurisdictions and what most sites should target for every text element. AAA (7:1 normal text) is recommended for critical content like legal, medical, or government information.

For comprehensive web design that meets accessibility standards from the ground up, explore our web design services and SEO services.

Next steps

Color Contrast Checker related tools and articles

Continue with the closest follow-up checks and guides based on this tool's topic, crawl intent, and optimization workflow.

Responsive Web Design: Why Mobile-First Isn't Optional in 2026

Web Design Trends That Actually Matter in 2026

Custom Website vs Template: Which Is Right for Your Business?

Accessibility Checker

Color Converter

Mobile-Friendly Checker

Color Contrast Checker: FAQ

What results does this Color Contrast Checker show?
It calculates the foreground-to-background contrast ratio and marks pass or fail for WCAG AA normal text, AA large text, AAA normal text, AAA large text, and the 3:1 UI-component threshold. It also previews the pair and displays both colors as HEX and RGB.
Which contrast thresholds does the tool apply?
AA normal text requires 4.5:1 and AA large text requires 3:1. AAA normal text requires 7:1 and AAA large text requires 4.5:1. The UI check uses 3:1. A pass applies only to the tested solid color pair and the selected text-size category.
When may I use the large-text result?
WCAG treats text as large at 18 point, about 24 CSS pixels, for regular weight or 14 point, about 18.66 CSS pixels, for bold text. Smaller or lighter text must use the normal-text threshold. Test the final computed size and weight, not a design-file label.
How does the calculator derive the ratio?
It converts each six-digit sRGB color to relative luminance using the WCAG channel transformation, then divides the lighter luminance plus 0.05 by the darker luminance plus 0.05. Swapping foreground and background therefore leaves the numeric ratio unchanged, although the visual preview changes.
How does the suggested accessible foreground color work?
When the ratio is below 4.5:1, the tool keeps the foreground hue and saturation, searches darker and lighter lightness values, and offers the first color that reaches 4.5:1 against the chosen background. Apply it as a starting point, then confirm brand fit and every actual state.
Which color formats can I enter?
The text fields accept three-digit or six-digit HEX values, with or without the hash prefix, and the native pickers provide six-digit HEX. This checker does not accept RGB, HSL, eight-digit HEX, alpha transparency, gradients, images, or blended backgrounds.
Does a passing pair prove the component is accessible?
No. The checker evaluates two solid colors only. Real components can change through opacity, anti-aliasing, gradients, background images, hover and disabled states, font weight, and overlays. It also does not test non-color cues, focus visibility, text size, or the rest of WCAG.
Are the colors I test sent to a server?
No. Color parsing, luminance calculation, pass or fail checks, suggestions, swapping, and preview updates run in the browser. The checker makes no color-calculation request to a Web Aloha endpoint, so tested values are not uploaded by this feature.

Free Website Audit

Not sure what to fix first on your own website? We'll review it and tell you, in plain English, within 48 hours. Free and non-obligatory.

Get my free website audit 💪

Need Help with Web Accessibility?

We build accessible, WCAG-compliant websites that work for everyone, and rank better too.

Explore Web Design Services 🚀