WCAG Color Contrast Ratio Calculator
The WCAG contrast ratio compares the relative luminance of a foreground color with the background color. It is a useful accessibility check for text and interface elements.
How to use this calculator
- Enter three- or six-digit hex colors with or without a leading #.
- Check that the input values use the same units and reporting period before comparing scenarios.
- Change one assumption at a time to see which input drives the result.
Formula and method
Contrast ratio = (lighter relative luminance + 0.05) / (darker relative luminance + 0.05).
- Each sRGB channel is linearized before relative luminance is calculated; the larger luminance is then divided by the smaller luminance using the 0.05 offset.
- This checks only color contrast for the entered solid hex colors. It does not audit the whole page, non-text contrast, font sizing, states, images, transparency or all WCAG success criteria.
Worked examples
Worked example
A dark foreground #1B1B1B is compared with white #FFFFFF.
Each sRGB channel is linearized before relative luminance is calculated; the larger luminance is then divided by the smaller luminance using the 0.05 offset.
The result reports the ratio and whether it meets common AA text contrast thresholds.
Understanding the result
The result reports the ratio and whether it meets common AA text contrast thresholds.
This checks only color contrast for the entered solid hex colors. It does not audit the whole page, non-text contrast, font sizing, states, images, transparency or all WCAG success criteria.
Important notes
Enter three- or six-digit hex colors with or without a leading #.
The displayed result uses the entered assumptions; validate important estimates against source measurements, specifications or qualified guidance.
Frequently asked questions
Does a pass make a page WCAG compliant?
No. Accessibility conformance covers many requirements beyond this one contrast test.
Can I use named colors such as blue?
Enter a hexadecimal color such as #0000FF; named color parsing is not included.
Related calculators
- Donation Goal Progress Calculator — Track progress toward a fundraising target and calculate the amount and daily pace needed to close the gap.
- Food Waste Rate Calculator — Measure the share of tracked food mass discarded and report the edible amount used and unaccounted remainder.
- Image Compression Savings Calculator — Compare source and compressed image sizes to calculate bytes saved and the percentage reduction.
- Print Bleed Size Calculator — Calculate artwork dimensions including bleed beyond each trim edge and the expanded document area.
- Responsive Image Dimensions Calculator — Calculate a proportional image height and pixel dimensions for a target CSS width and device pixel ratio.
- Seed Germination Rate Calculator — Calculate the observed germination percentage from a seed test and estimate how many seeds germinated.
Related explanations
Learn the method behind the number or compare the terminology before using the calculator.
- How to Calculate Percent Error — Learn the percent error formula and how to compare an experimental value with a reference or accepted value.
- Percentage Change vs Percentage Difference — Understand the difference between percentage change and percentage difference, including when each formula is appropriate.
- Standard Deviation — Understand standard deviation as a measure of spread and the difference between population and sample standard deviation.
This page provides a calculation tool plus explanatory information so you can understand what the result means and when the underlying method may not fit your situation.