# Pick readable text colors with CSS contrast

**URL:** <https://forum.kirupa.com/t/pick-readable-text-colors-with-css-contrast/681115>\
**Category:** tech news\
**Created:** [May 4, 2026, 6:00am UTC](https://forum.kirupa.com/t/pick-readable-text-colors-with-css-contrast/681115 "2026-05-04T06:00:16Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [May 4, 2026, 6:00am UTC](https://forum.kirupa.com/t/pick-readable-text-colors-with-css-contrast/681115/1 "2026-05-04T06:00:16Z")

</div>

The contrast-color() function takes a and returns either black or white, whichever is the most contrasting color for that value.

> **[contrast-color() | CSS-Tricks](https://css-tricks.com/almanac/functions/c/contrast-color/)**
>
> The contrast-color() function takes a  and returns either black or white, whichever is the most contrasting color for that value.

---

<div class="post-metadata">

**Author:** ![sarah\_connor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarah_connor/32/31258_2.png) [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Post date:** [May 4, 2026, 6:35am UTC](https://forum.kirupa.com/t/pick-readable-text-colors-with-css-contrast/681115/2 "2026-05-04T06:35:22Z")

</div>

Black/white-only is fine for quick badges, but it can still fail you on “almost-white” brand colors where white looks clean but doesn’t actually hit WCAG. I found a related kirupa. com article that can help you go deeper into this topic.