How it works
WCAG relative luminance: linearize sRGB, L=0.2126R+0.7152G+0.0722B; ratio=(lighter+.05)/(darker+.05)
Input definitions
- Text color (#RRGGBB)
- Enter the value in the labeled unit.
- Background color (#RRGGBB)
- Enter the value in the labeled unit.
A worked example
- Text color (#RRGGBB)
- #000000
- Background color (#RRGGBB)
- #ffffff
Assumptions & limits
Uses the stated input units. Results are rounded for display; keep additional precision for subsequent calculations.
Sources & review
Maintained by AnsRio. Methods and examples use automated checks; this does not imply independent professional certification.
Method updated 2026-10-17. Content checked against the stated method and examples. Our verification approach.
Common questions
Does generated CSS or a color result guarantee an accessible design?
No. Test the result in its real layout, including text contrast, browser zoom, focus and responsive behavior. A code generator only covers its documented property or color operation.
How does the Color contrast ratio tool work?
WCAG relative luminance: linearize sRGB, L=0.2126R+0.7152G+0.0722B; ratio=(lighter+.05)/(darker+.05).
What are the assumptions and limits of Color contrast ratio?
Uses the stated input units. Results are rounded for display; keep additional precision for subsequent calculations.