No Login Data Private Local Save

contrast‑color() Preview - Online Automatic Text Color

22
0
0
0
CSS Color Level 6 WCAG 2.1

contrast-color() Preview

Automatically determine the optimal text color (white or black) for any background, following WCAG contrast standards. Preview how CSS contrast-color() works in real time.

Selected Text Color AAA
White #FFFFFF
Contrast Ratio: 12.5:1
White
—
Black
—
The quick brown fox
AAA Pass
Pack my box with five dozen liquor jugs.
This paragraph demonstrates how body text renders against the selected background color. The text color is automatically chosen to ensure maximum readability and compliance with WCAG accessibility standards. Good contrast makes content accessible to everyone, including users with visual impairments.
Small text • Secondary information • Labels & captions • 12px equivalent
/* CSS Color Level 6 */
color: contrast-color(#4a6cf7);
Quick Presets Click to preview
AAA (Enhanced)
Contrast ≥ 7:1
All text sizes pass at the highest level
AA (Minimum)
Contrast ≥ 4.5:1
Normal text passes; large text may reach AAA
AA Large Only
Contrast ≥ 3:1
Only large text (≥18pt or 14pt bold) passes
Fail
Contrast < 3:1
Insufficient contrast for any text size

Frequently Asked Questions

contrast-color() is a CSS function introduced in CSS Color Level 6 specification. It automatically selects the most contrasting color from a list of candidates against a given background color. By default, it compares white (#FFFFFF) and black (#000000), returning whichever provides the higher contrast ratio. This eliminates manual color picking for text overlays and ensures WCAG accessibility compliance out of the box. The syntax is: contrast-color(<background-color>) or contrast-color(<bg> vs <color1>, <color2>) for custom candidates.

WCAG 2.x calculates contrast using relative luminance (perceived brightness) of each color. The formula involves:
  1. Linearize each sRGB channel (0-255) using gamma correction: values ≤ 0.03928 are divided by 12.92; otherwise raised to power 2.4 after scaling.
  2. Compute luminance: L = 0.2126×R + 0.7152×G + 0.0722×B (green contributes most to perceived brightness).
  3. Calculate ratio: (Llighter + 0.05) / (Ldarker + 0.05), yielding a value from 1:1 (identical) to 21:1 (pure black vs white).
This tool performs all these calculations in real time as you adjust the background color.

WCAG (Web Content Accessibility Guidelines) defines three conformance levels:
  • AA (Minimum) — Normal text needs ≥ 4.5:1 contrast; large text (≥18pt or 14pt bold) needs ≥ 3:1. This is the de facto legal standard.
  • AAA (Enhanced) — Normal text needs ≥ 7:1; large text needs ≥ 4.5:1. The gold standard for accessibility.
  • A (Basic) — No specific contrast requirements; generally not sufficient for text readability.
Most organizations target AA compliance. The contrast-color() function helps achieve this automatically.

White and black represent the two extremes of luminance (maximum and minimum brightness). For any given background, at least one of them will provide substantial contrast. This makes them the most reliable default candidates. The CSS specification allows customizing the candidate list using the vs keyword when you need brand-specific colors. However, for pure readability, the white/black dichotomy is remarkably effective — our tool demonstrates exactly how this decision is made by computing both ratios side by side.

As of 2024-2025, contrast-color() is part of the CSS Color Level 6 specification and is still in early stages of browser implementation. It is available behind experimental flags in some browsers. In the meantime, developers can:
  • Use this tool to manually determine the optimal text color
  • Implement the contrast calculation in JavaScript (as this tool does)
  • Use CSS custom properties with fallback values
  • Consider PostCSS plugins that polyfill the function at build time
Track browser support at caniuse.com or the W3C CSS Working Group drafts.

APCA (Advanced Perceptual Contrast Algorithm) is a next-generation contrast method developed for WCAG 3.0. Unlike the WCAG 2.x ratio method, APCA:
  • Accounts for text size and weight directly in its scoring
  • Uses a perceptually uniform model based on modern vision science
  • Provides continuous scoring (Lc values) rather than discrete ratios
  • Handles dark mode and light text on dark backgrounds more accurately
While APCA is promising, WCAG 2.x ratios remain the current legal standard. This tool uses the established WCAG 2.x method, which contrast-color() is also based on.

You can replicate contrast-color() with a simple JavaScript function: 
function contrastColor(bgHex) {
  const white = {r:255,g:255,b:255};
  const black = {r:0,g:0,b:0};
  const bg = hexToRgb(bgHex);
  const whiteContrast = getContrastRatio(white, bg);
  const blackContrast = getContrastRatio(black, bg);
  return whiteContrast > blackContrast ? '#FFFFFF' : '#000000';
}
This mirrors exactly what our tool calculates in real time. Use the luminance and contrast formulas from WCAG 2.x for production implementations.
🔧 Related Tools