How to Check Contrast Ratio Between Text and Background Colors

What the checker measures

The Contrast Checker compares a foreground color with a background color and returns a contrast ratio together with threshold-based assessments. This is useful when you are reviewing text placed over a colored surface, because the foreground and background are considered as a pair rather than as isolated swatches.

The checker accepts three-digit and six-digit hexadecimal text that begins with #. It also accepts RGB-like text that begins with rgb and contains three decimal numeric components separated by commas. Text entered with surrounding spaces is trimmed, and letter case is normalized before the value is parsed. These rules describe the input forms supported by the checker, so entering a different CSS color notation may lead to an error indication instead of the normal assessments.

Enter and run a comparison

1. Identify the two colors you want to compare. Put the text, icon, or other foreground content in the foreground input, and put the surface behind it in the background input.
2. Enter each color using a supported form. A hexadecimal value may contain three digits or six digits after its opening #; an RGB-like value starts with rgb and has three comma-separated decimal components.
3. Leave an input empty when you want to use its default. An empty foreground input uses black, #000000, while an empty background input uses white, #ffffff. You can therefore begin with the default black-on-white pair without typing either value.
4. Run the comparison after selecting or entering the pair. If both values can be parsed, the checker reports the ratio after rounding it to two decimal places.
5. Read the four assessments attached to that ratio. Two thresholds, 4.5 and 7.0, apply to normal text, while 3.0 and 4.5 apply to large text.
6. If the returned result contains an error indication, inspect both entries rather than looking for the usual assessments. Replace the value that does not follow a supported form, then submit the pair again.

The parser removes surrounding whitespace, so accidental spaces at the beginning or end of a value do not change the text being considered. It also lowercases the input before parsing, which means letter case in a submitted value is normalized during this process. RGB components are read as decimal integers, but the reviewed behavior does not apply an explicit range check to those components. Use values that represent the colors you intend to compare, and do not assume that a named color, arbitrary CSS expression, or another hexadecimal length will be accepted.

Read the returned assessments

The returned ratio describes the relationship between the foreground and background values that were submitted together. The assessments show how that result relates to the four thresholds displayed by the checker: the normal-text pair of 4.5 and 7.0, and the large-text pair of 3.0 and 4.5. Read each assessment for the text category you are reviewing instead of treating one status as a substitute for the others.

Rounding occurs before the threshold assessments are made, so the displayed two-decimal ratio and the assessment results belong to that rounded value. A pair made from identical parsed colors produces a ratio of 1.0. The result applies to the entered pair, which means a revised foreground, background, text size, or design context calls for a fresh check.

These assessments are useful for this color comparison, but they are not a complete evaluation of a design and do not provide a general guarantee of accessibility compliance. Consider the output as one color-pair check, not as a judgment covering layout, typography, content, or other design conditions.

Worked example

A designer reviews dark gray text on a white surface before using that color pair in a layout.

Enter #333333 for the foreground and #ffffff for the background, then run the comparison.

The returned result includes a contrast ratio rounded to two decimal places, followed by assessments for normal-text thresholds of 4.5 and 7.0 and large-text thresholds of 3.0 and 4.5.

Limitations

• The checker covers the listed hexadecimal and RGB-like forms, reads RGB components as decimal integers without an explicit range check, and offers threshold assessments rather than a complete design or accessibility evaluation.

Common errors

• Cause: a named color, unsupported CSS notation, or a hexadecimal value with a length other than three or six digits was submitted. Correction: replace that entry with a supported # hexadecimal form or an rgb value containing three comma-separated decimal components, then submit the comparison again.

FAQ

Can I check the default black-and-white pair?

You can leave both inputs empty for the default pair: the foreground is black, #000000, and the background is white, #ffffff. Entered values still need to use one of the supported color forms.

Which color formats can I enter?

Use three-digit or six-digit hexadecimal text beginning with #, or RGB-like text beginning with rgb and containing three comma-separated decimal components. A named color or another CSS notation is outside the listed input forms.

What happens when the foreground and background are the same color?

When parsing produces the same color for both inputs, the reported ratio is 1.0. That value describes the selected pair and does not extend to a wider evaluation of the design.