Skip to main content
SlapMyWeb
Get started
Skip to tool
CSS & Design tools/All tools
Free tool

Contrast ratio checker

Check WCAG 2.1 color contrast ratios instantly. Verify your text and background colors meet AA and AAA accessibility standards.

Contrast ratio
21.00:1
Excellent
Pass
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)

Normal text (16px) — The quick brown fox jumps over the lazy dog. This is how your body text will look with these color choices.

Large text (24px bold) — Heading Example

Small text (14px) — Secondary content and captions will appear like this.

contrast
Foreground: #000000
Background: #ffffff
Contrast Ratio: 21.00:1
Rating: Excellent

WCAG 2.1 Results:
  ✓ AA Normal Text: Pass (requires 4.5:1)
  ✓ AA Large Text: Pass (requires 3:1)
  ✓ AAA Normal Text: Pass (requires 7:1)
  ✓ AAA Large Text: Pass (requires 4.5:1)

What is Contrast Ratio Checker?

A contrast ratio checker is an accessibility testing tool that calculates the luminance difference between two colors according to the WCAG (Web Content Accessibility Guidelines) 2.1 specification. Color contrast is one of the most critical factors in web accessibility — if text does not have sufficient contrast against its background, users with low vision, color blindness, or those viewing screens in bright sunlight cannot read the content. The WCAG 2.1 standard defines specific minimum contrast ratios: 4.5:1 for normal text (AA level), 3:1 for large text (AA level), 7:1 for normal text (AAA level), and 4.5:1 for large text (AAA level). Large text is defined as 18pt (24px) or 14pt bold (approximately 18.66px bold). This tool calculates contrast ratios using the relative luminance formula defined in WCAG 2.1, which linearizes sRGB color values and applies weighted coefficients (0.2126 for red, 0.7152 for green, 0.0722 for blue) to compute perceived brightness. The ratio is then calculated as (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's luminance. All processing runs entirely in your browser — no data is sent to any server.

How to Use Contrast Ratio Checker

  1. 1

    Enter your colors

    Use the color pickers or type hex values directly to set your foreground (text) color and background color. The tool accepts standard 3-digit or 6-digit hex color codes like #000 or #1a2b3c.

  2. 2

    Read the contrast ratio

    The contrast ratio is displayed immediately as a value between 1:1 (no contrast) and 21:1 (maximum contrast, black on white). The rating label tells you at a glance whether your combination is Excellent (7+), Good (4.5+), Fair (3+), or Poor.

  3. 3

    Check WCAG compliance

    Four pass/fail badges show you exactly which WCAG 2.1 levels your color combination meets: AA Normal Text, AA Large Text, AAA Normal Text, and AAA Large Text. The live preview panel shows how your text actually looks at different sizes.

Features

  • Accurate WCAG 2.1 contrast ratio calculation using the relative luminance formula
  • Pass/fail badges for all four WCAG compliance levels (AA/AAA, Normal/Large text)
  • Live text preview showing normal (16px), large (24px bold), and small (14px) text
  • Color picker and hex input for both foreground and background colors
  • One-click swap button to quickly reverse foreground and background
  • Instant calculation — results update in real time as you adjust colors
  • Rating system from Poor to Excellent for quick assessment
  • Zero server calls — all calculations run in your browser

Related Tools

CSS Gradient Generator

Create beautiful linear, radial and conic CSS gradients with live preview. Copy CSS or Tailwind code.

Open tool

CSS Box Shadow Generator

Build layered box shadows visually with offset, blur, spread and color controls. Copy CSS instantly.

Open tool

CSS Border Radius Generator

Design custom border-radius shapes with independent corner controls and live preview.

Open tool

CSS Flexbox Generator

Visual flexbox layout builder. Configure direction, wrap, alignment and gap with live preview.

Open tool

CSS Grid Generator

Visual CSS grid builder with rows, columns, gap and named areas. Copy CSS and HTML code.

Open tool

CSS Text Shadow Generator

Create beautiful text shadows with offset, blur and color. Multiple layers and live preview.

Open tool
See all CSS & Design tools

Frequently Asked Questions

What contrast ratio do I need for WCAG compliance?+
For WCAG 2.1 Level AA compliance, normal text needs at least 4.5:1 contrast ratio and large text (18pt/24px or 14pt bold) needs at least 3:1. For the stricter Level AAA, normal text requires 7:1 and large text requires 4.5:1. Most accessibility laws and guidelines reference Level AA as the minimum standard.
What counts as large text in WCAG?+
WCAG defines large text as at least 18 points (24 CSS pixels) for regular weight, or at least 14 points (approximately 18.66 CSS pixels) for bold text. Large text has lower contrast requirements because bigger characters are inherently easier to read.
Why does my color combination fail even though it looks readable to me?+
WCAG contrast ratios are designed to ensure readability for people with low vision (approximately 20/80 acuity), not just those with typical vision. A combination that looks fine to you may be unreadable for someone with reduced contrast sensitivity. The standards are intentionally conservative to cover a wide range of visual abilities and viewing conditions.
Does this tool check color blindness compatibility?+
This tool checks luminance contrast, which is the most important factor for readability. Color blindness (like deuteranopia or protanopia) affects color perception but not luminance perception, so a good contrast ratio helps all users regardless of color vision deficiency. However, you should also avoid relying on color alone to convey information — always use additional cues like text labels or patterns.
What is the maximum possible contrast ratio?+
The maximum contrast ratio is 21:1, which occurs between pure black (#000000) and pure white (#ffffff). The minimum is 1:1, which means both colors have identical luminance — this occurs when both colors are the same.
Is WCAG AA enough or should I aim for AAA?+
WCAG Level AA (4.5:1 for normal text) is the legal minimum in most jurisdictions and is sufficient for most websites. Level AAA (7:1 for normal text) is recommended for content targeting users with significant visual impairments, government websites, and healthcare applications. Higher contrast is always better for usability, so aim for AAA when your design allows it.