Colour Contrast Ratio Calculator

Calculate contrast ratio for hex colour with Colour Contrast Ratio Calculator using the values that apply to your situation. Enter Foreground Colour and Background Colour, and the calculator uses those values to show contrast ratio. Use it while handling hex colour to avoid repeating several small conversions or calculations manually. Real devices, networks and software can add limits or overhead that are not represented by a simple numerical input. You can recalculate as often as needed, which makes Colour Contrast Ratio Calculator useful for checking more than one hex colour scenario on the same basis. Read the worked example on the Colour Contrast Ratio Calculator page if you want to check how the entered values lead to contrast ratio before using your own figures.

How to use Colour Contrast Ratio Calculator

To use Colour Contrast Ratio Calculator, start with the values that apply to your hex colour case. Type the required text into Foreground Colour, then Type the required text into Background Colour. Run the calculation to see contrast ratio, then compare the answer with the values you entered before using it. Use valid colour or encoding values within the range requested by the tool. You can rerun Colour Contrast Ratio Calculator with different values as often as needed, which is useful when comparing alternative hex colour scenarios. If the result looks unexpected, recheck the original values and units before changing the calculation assumptions. Keep any cost, delay, allowance or adjustment that is not represented by a field separate unless the page specifically tells you to include it.

Why use this tool?

Use Colour Contrast Ratio Calculator when hex colour requires a small digital calculation that would otherwise mean converting several units by hand. It gives you a consistent result for comparing files, screens, images, text or transfer settings. Because the calculation is based on Foreground Colour and Background Colour, you can see which values need to change when you want to test another case. Because Colour Contrast Ratio Calculator focuses only on hex colour, you can change one input at a time and see how that affects contrast ratio without changing the basis of the comparison. This also makes Colour Contrast Ratio Calculator practical for checking more than one hex colour option, because each run uses the same calculation and the same input definitions.

How the calculation works

Colour Contrast Ratio Calculator converts both colours to relative luminance and calculates the WCAG contrast ratio (L1 + 0.05) / (L2 + 0.05). The result is worked out from Foreground Colour and Background Colour, with each field applied according to the rule above. Colour-channel values must stay within their valid range; an out-of-range value is rejected instead of being silently changed. The result is reported as contrast ratio from the text supplied, so editing the source text and running the tool again updates the output. When comparing two text versions, use the complete text in both cases and keep the same formatting and counting rules.

Example

For example, enter Foreground Colour = “#336699” and Background Colour = “#336699”. The calculator returns 1:1 for contrast ratio. This works by converting both colours to relative luminance and calculate the WCAG contrast ratio (L1 + 0.05) / (L2 + 0.05), which gives the displayed contrast ratio.

Practical tip

For Colour Contrast Ratio Calculator, use the complete, final content for Foreground Colour and Background Colour rather than a shortened sample when the exact text affects the answer. Keep the same units and assumptions whenever you compare two results from this tool. Keep the same unit convention when comparing two hex colour cases so differences in contrast ratio are not caused by mixing bits, bytes, pixels or time units. Keep the source values alongside contrast ratio if you may need to check the calculation again later.