search

twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com
MIT License
170.47k stars 78.83k forks source link

Use SAPC-APCA algorithm for color contrast #40652

Open krmax44 opened 2 months ago

krmax44 commented 2 months ago

Prerequisites

Proposal

Currently, the WCAG algorithm is used to decide whether to use a light or dark foreground for a given background color. This isn't the best algorithm for the job. The SAPC-APCA algorithm seems like a better choice. For example, consider the background color #3bb273 with the foreground choices #001c5a or #ffffff. WCAG chooses the less legible option.

WCAG SAPC-APCA
Badge with WCAG Badge with SAPC-APCA

Motivation and context

The SAPC-APCA authors have written extensively about the issues of WCAG: https://git.apcacontrast.com/documentation/APCAeasyIntro

mc2002tii commented 2 months ago

Maybe it's just me, but in your example the WCAG version is easier to read than the SAPC-APCA one.

mbrodala commented 2 months ago

IMO both variants are bad contrast-wise but my subjective choice would be the SAPC-APCA variant.