Perform fast calculations with our user-friendly online calculator! Conveniently crunch numbers and solve equations instantly. Ideal for quick math tasks, our tool simplifies your daily computations effortlessly. Try our intuitive calculator for accurate results on the go!
Calculate color contrast ratio online with our easy accessibility tool. Check contrast between two colors and see if they meet WCAG AA or AAA levels.
| Level | Normal Text | Large Text |
|---|---|---|
| AA (Minimum) | 4.5 : 1 | 3 : 1 |
| AAA (Enhanced) | 7 : 1 | 4.5 : 1 |
A color contrast ratio calculator helps you compare two colors fast. It shows how easy text is to read against a background. This matters for websites, apps, forms, and digital content.
Our free color contrast ratio checker uses the WCAG 2.x method. Enter a foreground color and a background color in HEX format. The tool finds the contrast ratio between colors. It also checks common WCAG AA and AAA limits.
The definition of contrast ratio is the difference in relative luminance between two colors. A higher ratio means stronger contrast.
The ratio starts at 1:1. The highest possible ratio is 21:1. Black text on a white background gives 21:1.
A color contrast ratio 4.5:1 is a key accessibility level. It is the minimum WCAG AA ratio for normal-sized text.
The calculator first changes each HEX color into RGB values. It then converts the RGB channels into linear sRGB values.
For each channel, the formula is:
c = C ÷ 255
If c ≤ 0.03928:
Linear value = c ÷ 12.92
Otherwise:
Linear value = ((c + 0.055) ÷ 1.055)²·⁴
Next, it finds relative luminance:
L = 0.2126R + 0.7152G + 0.0722B
The color contrast ratio formula is:
Contrast Ratio = (Lighter L + 0.05) ÷ (Darker L + 0.05)
The calculator always places the lighter luminance on top. This keeps the result correct.
Using our color contrast ratio tool is simple.
The calculator converts the colors to RGB and finds their relative luminance.
The result shows the contrast ratio between colors and checks the WCAG AA and AAA levels.
This makes it easy to check color contrast ratio before using colors on a website or app.
Suppose the foreground color is black, #000000, and the background is white, #FFFFFF.
Black has a relative luminance of:
L = 0
White has a relative luminance of:
L = 1
Now apply the formula:
Contrast Ratio = (1 + 0.05) ÷ (0 + 0.05)
Contrast Ratio = 1.05 ÷ 0.05
Contrast Ratio = 21:1
A 21:1 ratio gives very strong contrast. It passes the common WCAG AA and AAA text requirements.
For normal text, WCAG AA needs at least 4.5:1. Large text needs at least 3:1. AAA needs 7:1 for normal text and 4.5:1 for large text.
Our color contrast ratio calculator for accessibility gives you a quick way to calculate contrast between two colors. It uses HEX colors, RGB conversion, relative luminance, and the standard WCAG contrast ratio formula.
Use this color contrast ratio test when choosing text and background colors. A good contrast ratio can make your content easier to read and more accessible.
For WCAG AA, normal text needs at least 4.5:1. Large text needs at least 3:1.
A 4.5:1 ratio means the lighter color has a luminance contrast that is 4.5 times the adjusted luminance of the darker color. It is the common WCAG AA target for normal text.
Yes. Enter both HEX colors into the colour contrast ratio calculator. The tool converts them to RGB and calculates their relative luminance and contrast ratio.
No. A color contrast percentage calculator and a contrast ratio calculator are not the same. WCAG accessibility uses a contrast ratio, such as 4.5:1 or 7:1, rather than a percentage.
For normal text, 4.5:1 or higher is a common WCAG AA target. A ratio of 7:1 or higher meets the AAA target for normal text.