In web design and digital accessibility, ensuring sufficient contrast between text and its background is crucial. The Color Contrast Ratio is a metric used to determine this difference. It helps users with visual impairments, such as low vision or color blindness, to perceive content more easily. The Web Content Accessibility Guidelines (WCAG) provide specific contrast ratio requirements to ensure readability.
How the Contrast Ratio is Calculated
The contrast ratio is calculated based on the relative luminance of the two colors. Relative luminance is a measure of the perceived brightness of a color. The formula involves several steps:
Convert RGB to Relative Luminance (L): For each color (in RGB format), its relative luminance is calculated using the following formula:
1. Convert R, G, B values from the range [0, 255] to sRGB values in the range [0, 1] by dividing by 255.
2. For each component (R, G, B), if the value is less than or equal to 0.03928, divide it by 12.92.
3. If the value is greater than 0.03928, use the formula: ((value + 0.055) / 1.055) ^ 2.4
4. The relative luminance (L) is then calculated as: L = 0.2126 * R + 0.7152 * G + 0.0722 * B
Calculate Contrast Ratio: Once you have the relative luminance values for both colors (L1 and L2), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color, the contrast ratio is calculated as:
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
The '+ 0.05' factor is added to account for the perceived difference when colors are very close to black.
WCAG Contrast Requirements
WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt if bold). AAA, the highest level, requires 7:1 for normal text and 4.5:1 for large text. This calculator helps you verify if your chosen color combinations meet these essential accessibility standards.
Use Cases
Web Accessibility Audits: Quickly check if website text and background colors meet WCAG contrast requirements.
UI/UX Design: Ensure readability and a positive user experience by selecting accessible color combinations for interfaces.
Branding: Verify that brand colors provide sufficient contrast when used together for text and backgrounds.
Document Creation: Ensure printed or digital documents are readable for all users.
function hexToRgb(hex) {
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function(m, r, c, b) {
return r + r + c + c + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
function srgbToLinear(c) {
var c = c / 255;
if (c lum2) {
contrastRatio = (lum1 + 0.05) / (lum2 + 0.05);
} else {
contrastRatio = (lum2 + 0.05) / (lum1 + 0.05);
}
contrastRatioElement.textContent = contrastRatio.toFixed(2) + ":1";
}