Contrast Ratio Calculator
Calculate the contrast ratio between two colors or luminance values. Essential for web accessibility (WCAG) compliance and ensuring readable text on backgrounds.
Relative luminance of first color (0.0-1.0 or 0-255)
Relative luminance of second color (0.0-1.0 or 0-255)
How to Use This Calculator
- Determine the relative luminance of your foreground and background colors (0.0-1.0 scale or 0-255 RGB values).
- Enter the luminance values for both colors into the calculator.
- The calculator displays the contrast ratio and indicates WCAG compliance level (AA or AAA).
- Use the results to adjust colors if needed to meet accessibility standards for your text size.
Contrast Ratio Formula
Contrast ratio is calculated using the WCAG formula, which accounts for human perception:
Where L₁ is the relative luminance of the lighter color and L₂ is the relative luminance of the darker color. The 0.05 offset accounts for ambient light and improves accuracy for very dark colors.
Full Description
Contrast ratio is a critical metric for web accessibility and design. It measures the difference in luminance between foreground and background colors, determining how readable text is for users, especially those with visual impairments. The Web Content Accessibility Guidelines (WCAG) establish minimum contrast ratios that websites should meet to be accessible.
WCAG defines two levels: AA (minimum standard) and AAA (enhanced standard). AA requires 4.5:1 contrast for normal text (18pt or smaller) and 3:1 for large text (18pt+ or 14pt+ bold). AAA requires 7:1 for normal text and 4.5:1 for large text. These standards ensure that content is readable for people with various visual abilities and in different lighting conditions.
This calculator helps designers and developers ensure their color choices meet accessibility standards. By entering luminance values (which can be calculated from RGB values), you can instantly see if your color combinations pass WCAG requirements. This is essential for creating inclusive digital experiences and may be legally required in many jurisdictions.
Frequently Asked Questions
What is contrast ratio?
Contrast ratio measures the difference in luminance (brightness) between two colors. It's expressed as a ratio like 4.5:1, where higher numbers indicate greater contrast. This is essential for readability, especially for text on backgrounds.
What are WCAG contrast requirements?
WCAG (Web Content Accessibility Guidelines) requires: AA level needs 4.5:1 for normal text and 3:1 for large text. AAA level needs 7:1 for normal text and 4.5:1 for large text. These ensure content is readable for people with visual impairments.
How do I convert RGB to relative luminance?
For sRGB colors: L = 0.2126×R + 0.7152×G + 0.0722×B, where R, G, B are normalized to 0-1. For simplicity, many tools use 0-255 RGB values directly, but proper calculation requires gamma correction and normalization.
Why is contrast ratio important?
Low contrast makes text difficult or impossible to read, especially for people with visual impairments, color blindness, or in poor lighting conditions. Meeting WCAG standards ensures your content is accessible to all users and may be legally required in many jurisdictions.