Contrast Ratio Calculator
Get the exact contrast ratio between two sRGB colors using the WCAG relative luminance formula. No sign-up, no server calls.
How to calculate a contrast ratio
- Enter foreground and background colors (hex, rgb(), or hsl()).
- Read the numeric WCAG ratio.
- Use the threshold badges to see AA/AAA for normal and large text.
- Swapping the two colors does not change the ratio.
FAQ
- Using WCAG 2.x relative luminance: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color.
- Same engine. This route emphasizes the numeric ratio; the Contrast Checker emphasizes pass/fail badges.
- Hex (#RRGGBB), rgb(), and hsl() syntax.
- Black on white is the maximum contrast pair in WCAG relative luminance math, producing roughly 21:1. Higher numbers do not occur for sRGB.
- No. Contrast ratio uses the lighter and darker luminance regardless of which color is text versus background.
Related tools
- Contrast CheckerEnter foreground and background colors to get an instant WCAG contrast ratio with pass/fail for normal and large text.
- Color PickerPick a color visually or type any format.
- HEX to RGBTurn a hex color into an rgb() function and individual channel values.
- RGB to HEXEnter RGB channel values or paste an rgb() string to get an uppercase hex code.