Methodology for Colour Contrast Checker
A detailed explanation of how our tool calculates and evaluates color contrast for accessibility
1. Introduction
The Colour Contrast Checker is a tool designed to evaluate the contrast ratio between foreground (text) and background colors to ensure readability and accessibility compliance with established standards such as the Web Content Accessibility Guidelines (WCAG).
This document outlines the methodology used to calculate color contrast ratios, determine compliance levels, and provide recommendations for accessible color combinations.
2. Color Contrast Ratio Calculation
The contrast ratio is calculated using the luminance values of the foreground and background colors. The formula follows the WCAG 2.1 guidelines:
Luminance Calculation
The relative luminance (L) of a color is calculated based on its RGB components, adjusted for human perception:
Step 1: Convert sRGB values to linear RGB: For each color channel (R, G, B), apply the following:
Clinear = {
CsRGB / 12.92 if CsRGB ≤ 0.03928
((CsRGB + 0.055) / 1.055)^2.4 otherwise
}
Where CsRGB is the color channel value normalized to [0, 1].
Step 2: Calculate relative luminance (L):
L = 0.2126 × Rlinear + 0.7152 × Glinear + 0.0722 × Blinear
Contrast Ratio Formula
The contrast ratio (CR) between two colors (foreground L1 and background L2) is computed as:
CR = (max(L1, L2) + 0.05) / (min(L1, L2) + 0.05)
The result is rounded to two decimal places.
3. WCAG Compliance Levels
The tool checks compliance against WCAG 2.1 success criteria:
| Level | Minimum Contrast Ratio | Use Case |
|---|---|---|
| AA (Normal Text) | 4.5:1 | Standard body text (≥16px normal weight or ≥14px bold) |
| AA (Large Text) | 3:1 | Large text (≥18px normal or ≥14px bold) |
| AAA (Normal Text) | 7:1 | Enhanced readability (smaller or thin fonts) |
| AAA (Large Text) | 4.5:1 | Large text with higher contrast |
4. Implementation Details
Input Handling
- Accepts colors in HEX, RGB, HSL, or named formats.
- Automatically converts input colors to RGB for calculations.
Accessibility Feedback
- Pass/Fail indicators for WCAG levels (AA/AAA).
- Dynamic preview of text on the selected background.
- Recommendations for adjusting colors if contrast is insufficient.
Additional Features
- Simulation of color blindness (e.g., Deuteranopia, Protanopia, Tritanopia).
- Text size adjustments to check compliance for large vs. normal text.
5. Testing & Validation
- Verified against WCAG 2.1 contrast requirements.
- Cross-checked with industry-standard tools (e.g., WebAIM Contrast Checker, Adobe Color).
- Tested across multiple browsers and devices for consistency.
6. Limitations
- Assumes sRGB color space (does not account for display calibration).
- Does not evaluate text styling (e.g., shadows, transparency effects).