Contrast   Ratio   Calculator

Please provide two Hex, RGB, HSL or named color values to see the contrast ratio result.

Results

Contrast Ratio

Small Text

AA+ AAA+

Large Text

AA+ AAA+

Graphics

AA+

How does it work?

Enter a foreground and background color in one of the following formats:

  • HEX format: #AAAB1C
  • RGB format: rgb(100, 1, 233)
  • HSL format: hsl(240, 100%, 50%)

The Contrast Ratio Calculator will calculate the contrast, ranging from 1 (no contrast) to 21 (black on white).

How much contrast do I need?

This tool follows the Web Content Accessibility Guidelines (WCAG), which are a series of recommendations for making the web more accessible.
Regarding colors, the standard defines two levels of contrast ratio: AA (minimum contrast) and AAA (enhanced contrast).

AA level

  • 4.5:1: for normal text.
  • 3:1: for large text.

WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).

AAA level

  • 7:1: for normal text.
  • 4.5:1: for large text.

Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.