Color Codes and Text-to-background Contrast

Written and checked by Rakuruno · Updated November 1, 2026

Before using a color behind text, check the foreground and background together. Normalize the color notation first, then evaluate the actual text-to-background pair.

Confirm the HEX value of an RGB color

1. Enter rgb(47,111,237) in Color Converter.
2. Check that the HEX result is #2f6fed. This example uses opaque colors.
3. In Contrast Checker, set the text color to #FFFFFF and background to #2F6FED.

Read the ratio and normal-text result

Blue and white display a ratio of about 4.55:1 and pass AA normal text. The pass/fail check uses the unrounded ratio. AA requires at least 4.5:1 for normal text and 3:1 for large text. See W3C’s contrast explanation for the definitions and exceptions.

A different background changes the result

Change the background to mint #22B8A7. White text gives about 2.48:1 and fails AA normal text. Changing the text color to #172033 gives about 6.57:1 and passes the normal-text check. Evaluate color pairs rather than treating a single color as accessible or inaccessible.

A ratio is not a review of the whole page

This workflow calculates an opaque, solid-color pair. Text on photographs or gradients, translucent layers and hover states need a separate check of the visible colors. The tool does not automatically inspect type size or weight, recognizable links or interaction states. Check the actual page before adopting the pair.