CSS / Reference / color: Foreground Colors, CurrentColor, and Contrast

color sets a foreground color used for text and related painting. Background color is separate; properties using currentColor can follow the element’s foreground color.

Syntax and value choices

Initial values are not necessarily the values assigned to HTML elements by the browser’s stylesheet. Inspect the actual result in developer tools’ Computed panel.

.notice { color: #006c9c; }
.notice { border: 2px solid currentColor; }

For supported values and conditions, see MDN color.

Run the example and compare results

Save this complete code as css-reference-10663-example.html in UTF-8 and open it in a browser. Keep its demonstration styles in that file rather than pasting them into a site-wide stylesheet.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>color comparison example</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 220px; border: 2px solid currentColor; padding: 12px; }
.target { color: #006c9c; }
.reference { color: #a03c00; }
</style>
</head>
<body>
<main id="demo">
<h1>color comparison</h1>
<section class="samples"><div class="a"><p class="label">Blue foreground</p><div class="target">Text and border share a color</div></div><div class="b"><p class="label">Orange foreground</p><div class="reference">Text and border share a color</div></div></section>
</main>
</body>
</html>

The text and currentColor border change together. Changing color alone does not fill the background.

Inheritance and currentColor

Color is normally inherited by children. Explicit inherit requests the parent’s computed color. Omitting a border color or using currentColor can connect that border to each element’s text color.

Communicate with more than color

Combine an error or selected state with useful text or another perceivable cue. Check light, dark, and forced-color environments. Alpha compositing changes the final displayed color and therefore the contrast with its background.

Change one setting at a time

Use the complete example file above. Change only the specified selector or value rather than several comparison conditions at once.

1. Change only .target’s color and observe its currentColor border. Set a background separately, then restore the original colors.
2. Combine error colors with useful text or another cue. Measure contrast against the final background and check light, dark, and forced-color environments.

For color notation and practical choices of relative units, see CSS Colors and Units: px, em, rem, and Percentages.

Compare the minimum 4.5:1 threshold for ordinary text with 3:1 for large text. Check the official size conditions and exceptions such as inactive elements and logos. Over a photo or alpha background, inspect the composited background instead of entering only the original colors.

Check the relevant conditions in WCAG text contrast criteria.

For coordinated font sizing, line heights, and typeface choices, see CSS Fonts, Font Sizes, and Line Height. Related properties to compare alongside these conditions are background-color.

When the result is missing or unexpected

• Inspect a child or link rule when only some text has a different color.
• Check for background properties using currentColor when a foreground change also recolors a background.