Contrast Ratio Calculator

These examples are typical for UI text. Your exact ratio depends on your chosen colors.

1) Convert sRGB to linear light

For each channel (R, G, B) scaled to 0–1:

2) Relative luminance

3) Contrast ratio

Common thresholds: 4.5:1 for AA normal text, 7:1 for AAA normal text, and 3:1 for large text and many UI components.

1. Choose a foreground color for your text.
2. Choose a background color behind that text.
3. Pick an input mode: Auto, Hex, or RGB.
4. Click Calculate Contrast Ratio to see results.
5. Review AA and AAA checks for normal and large text.
6. Use the preview box to validate visual readability.
7. Download CSV or PDF to save your latest report.

1) Why contrast ratio matters

Contrast ratio measures how strongly text or icons stand out from a background. Better contrast improves comfort, reduces mistakes, and supports users with low vision or color-vision differences. It also helps outdoors where glare lowers perceived clarity. Good contrast benefits everyone, not only users with assistive needs.

2) What the number represents

The result appears like 4.50:1. The brighter color is compared to the darker one. A value of 1:1 means no difference, while 21:1 is the maximum for pure black on pure white.

3) Typical targets teams use

Many workflows aim for 4.5:1 for normal body text because small characters need extra separation. Large text and many UI parts often use 3:1, and AA normal text is often checked at 4.5:1. AAA normal text commonly targets 7:1 for the most demanding reading situations.

4) Luminance drives the calculation

Contrast uses relative luminance rather than simple RGB averages. Because the eye is most sensitive to green, it contributes more to luminance than red or blue. Accurate tools first linearize sRGB, then compute luminance from weighted channels.

5) Mid-gray on white is a common failure

Stylish mid-gray text can sit right around the 4.5:1 boundary and fail unexpectedly. If you want a softer look, darken the text slightly, increase weight, or tint the background a bit to regain contrast.

6) Real backgrounds vary

Gradients and photos create many local background values, so text may pass in one area and fail in another. Check against the lightest and darkest regions, or add a subtle scrim or overlay behind text for stability.

7) Preview before you publish

Use the preview to test your exact font size, weight, and line height. Thin fonts can look weaker than numbers suggest. If something feels borderline, aim above the minimum so readability survives device differences.

8) Practical workflow for consistent palettes

Pick a background, then choose primary text that meets your target ratio. Repeat for secondary text, disabled states, and interactive controls. Save approved pairs as design tokens, and export reports to document decisions for reviews.

1) What is a good contrast ratio for body text?

A common target is 4.5:1 for normal-sized text. It improves readability for most users and supports accessibility goals. If you can reach 7:1 without hurting the look, that is even stronger.

2) Why can a passing ratio still look hard to read?

Font weight, size, anti-aliasing, and screen quality affect perceived clarity. Very thin fonts and small sizes may feel weak even when they pass. Increase contrast, weight, or size for a more comfortable result.

3) Does large text have different requirements?

Yes. Large text is often acceptable at lower ratios, commonly 3:1, because bigger shapes are easier to distinguish. For important headings or small captions, aiming higher than the minimum still improves comfort.

4) Can I check buttons, borders, and icons?

Yes. UI components benefit from contrast checks, especially icons and outlines. Many teams use at least 3:1 for UI elements and interactive controls, then increase contrast for small icons or critical actions.

5) How do gradients and photos affect contrast?

They change the background behind each letter. Text might pass on darker areas and fail on lighter areas. Test against extremes, or add an overlay, blur, or solid label background to stabilize contrast.

6) What is relative luminance in simple terms?

Relative luminance estimates how bright a color appears to human vision after correcting for sRGB. It weights channels differently, with green contributing most. The calculator uses it to compute contrast consistently.

7) How should I save and share chosen pairs?

Record the foreground and background values, the ratio, and the intended use such as body text or buttons. Use the CSV or PDF export so designers, developers, and reviewers can reference the same data.