How to use this tool
Enter two opaque HEX colors and the percentage of the second color in the mix.
Check contrast for text/background use separately from the mixed color. The mix uses encoded sRGB channels rather than perceptual interpolation.
Contrast = (lighter luminance + .05)/(darker luminance + .05)
Worked example
5.73:1 · contrast ratio
Fixed example using the settings below. Monetary examples use USD; dates and times use their stated reference values. This example stays unchanged when you edit your calculation.
Example inputs
- First HEX color: #1f5fd6
- Second / background HEX color: #ffffff
- Second color in mix (%): 50
Method illustration: Black and white have contrast 21:1. Equal encoded-sRGB black/white mixing produces #808080.
Assumptions and limits
- Opaque sRGB colors only; no alpha or other color spaces. Mixing interpolates encoded sRGB channel values, not perceptual or linear-light values.
- AA normal text requires at least 4.5:1 and large text 3:1. Contrast alone does not establish complete accessibility.
Method reference: W3C WCAG contrast minimum
Check or report a result
Check the units, selected calculation and assumptions first. Compare the fixed example above with your inputs to identify what changed.
Report a calculation issue with the page address, hypothetical inputs, result displayed and result expected. Do not include passwords, bank details or other private information.