Check WCAG 2.1 color contrast ratios instantly. Verify your text and background colors meet AA and AAA accessibility standards.
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.
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)
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.
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.
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.
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.
Create beautiful linear, radial and conic CSS gradients with live preview. Copy CSS or Tailwind code.
Build layered box shadows visually with offset, blur, spread and color controls. Copy CSS instantly.
Design custom border-radius shapes with independent corner controls and live preview.
Visual flexbox layout builder. Configure direction, wrap, alignment and gap with live preview.
Visual CSS grid builder with rows, columns, gap and named areas. Copy CSS and HTML code.
Create beautiful text shadows with offset, blur and color. Multiple layers and live preview.