Color Contrast Generator


Color contrast refers to the difference in brightness and hue between text (or any other interface element) and the background behind it. Good contrast improves readability and allows users — especially those with visual impairments or in poor lighting conditions — to quickly and easily distinguish content. When choosing two colors, it’s important to check not only how they look together but also their actual luminance difference, which determines how readable the content will be.

Accessibility standards such as WCAG define recommended contrast ratios for different types of text — for example, 4.5:1 for regular text and 3:1 for large or bold text. These values help ensure that text remains legible even on small screens or in low-light environments. Contrast checking tools usually calculate this ratio and provide clear feedback on whether a color combination is suitable or if an alternative should be used.

When using our tool, also consider context — decorative elements may require less strict contrast than text conveying information or indicating interaction (such as buttons or links). If the color combination fails the test, consider adjusting the hue, brightness, or adding outlines/shadows to improve visibility without sacrificing aesthetics. Good contrast is not just a rule — it’s a key to inclusive and professional design.

Color Contrast Generator

How to determine text color vs background color (Color Contrast)

Good color contrast between text and its background is essential for readability and accessibility. Contrast is measured as a ratio between the relative luminance of the foreground (text) and the background. Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable for people with low vision or color deficiencies.

WCAG contrast thresholds

Use these WCAG benchmarks when deciding text colors: - For normal text (regular size) - Level AA requires at least 4.5:1 contrast, Level AAA requires 7:1. - For large text (at least 18pt / 24px or 14pt / 18.66px bold) - Level AA requires at least 3:1, Level AAA requires 4.5:1. - For user interface components and graphical objects - Level AA requires at least 3:1 against adjacent background.

Step-by-step method to compute contrast

1) Convert each color from hex/RGB to sRGB values normalized to 0-1 (divide 0-255 values by 255). 2) Convert each sRGB channel to linear RGB: - if channel <= 0.03928 then linear = channel / 12.92 - else linear = ((channel + 0.055) / 1.055) ^ 2.4 3) Compute relative luminance L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin. 4) Calculate contrast ratio as (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance and L2 is the darker. 5) Compare the result to WCAG thresholds above - if it meets them, the combination is acceptable for that level and size.

Contrast formula and example values

Relative luminance formula: 

L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin

where R_lin, G_lin, B_lin are linearized sRGB channels as described above.

Example - using background color #3498db (rgb(52,152,219)): - Relative luminance of #3498db ≈ 0.283010102 - Relative luminance of #ffffff (white) = 1.0 - Contrast ratio white on #3498db = (1.0 + 0.05) / (0.283010102 + 0.05) ≈ 3.15:1 (fails AA for normal text, passes AA for large text) - Contrast ratio black (#000000) on #3498db = (0.283010102 + 0.05) / (0 + 0.05) ≈ 6.66:1 (passes AA for normal text, below AAA 7:1)

Quick JavaScript example to calculate contrast

Use this function in your tool to calculate luminance and contrast ratio programmatically: 

function hexToRgb(hex) {
  const h = hex.replace('#','');
  return [
    parseInt(h.substring(0,2),16),
    parseInt(h.substring(2,4),16),
    parseInt(h.substring(4,6),16)
  ];
}

function srgbToLinear(c) {
  c = c / 255;
  return (c <= 0.03928) ? (c / 12.92) : Math.pow((c + 0.055) / 1.055, 2.4);
}

function relativeLuminance(rgb) {
  const r = srgbToLinear(rgb[0]);
  const g = srgbToLinear(rgb[1]);
  const b = srgbToLinear(rgb[2]);
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function contrastRatio(hexA, hexB) {
  const L1 = relativeLuminance(hexToRgb(hexA));
  const L2 = relativeLuminance(hexToRgb(hexB));
  const lighter = Math.max(L1, L2);
  const darker = Math.min(L1, L2);
  return (lighter + 0.05) / (darker + 0.05);
}

Practical tips when choosing text color

- Prefer high contrast pairs - pick dark text on light backgrounds or light text on dark backgrounds. - If contrast is borderline, increase font-size or weight to meet large-text thresholds. - For decorative text or logos, consider providing an accessible alternative or ensure adjacent content is readable. - Use overlays or semi-transparent layers (for example a dark overlay at 30-50% opacity) over images or gradients so text placed on top achieves sufficient contrast. - Check interactive states - focus, hover, disabled - ensure each state maintains acceptable contrast. - Test with color-blindness simulators and real-device checks - luminance-based contrast does not capture all perceptual issues.

Advanced considerations

- WCAG contrast uses relative luminance in sRGB which is widely accepted, but perceptual models like OKLab/OKLCH can help fine-tune perceived contrast for modern wide-gamut displays. - For non-text graphics and UI controls, remember the 3:1 requirement at Level AA. - When aiming for AAA, expect stricter contrast - 7:1 for normal text and 4.5:1 for large text.

Conclusion

A Color Contrast tool should calculate relative luminance and contrast ratio automatically, show pass/fail against WCAG levels, and offer suggestions - for example switching to black/white text, darkening/lightening the background, adding overlays, or increasing text size/weight. Applying these rules ensures your text is readable and accessible to a wide audience.

Last update: 05. 07. 2025.