Generating color palettes for design systems … inspired by APCA!

https://www.ubuntu-server.com/ubuntu/generating-color-palettes-for-design-systems-inspired-by-apca/

زهرة الخليج – فلاتر جديدة من Dior احتفاء بشهر رمضان المبارك

https://todaypic.net/entertainment/150177/

For the "it's the law tho" crowd, here's a fix:

APCA to WCAG 2 Backwards Compatibility Chart

For 4.5:1

Backwards 4.5:1 is achieved when:

IF the lightest color is darker than #d0d0d0
OR the darkest is darker than #595959
THEN Lc ±60 exceeds 4.5:1

ELSE Lc 72 or Lc -77 exceeds 4.5:1 in all cases

---
For 3:1

Backwards 3:1 is achieved when:

IF the lightest color is darker than #c4c4c4
OR the darkest is darker than #6c6c6c
THEN Lc ±45 exceeds 3:1

ELSE Lc 57 or Lc -63 exceeds 3:1 in all cases

---
Here's the implication:

If both colors are darker than #d0d0d0 or at least one is darker than #595959:

Then it's not a matter of "can you?" use APCA, it's a matter of you *should* use APCA.

For color pairs darker than #d0d0d0, WCAG 2.x contrast math results are not meaningful, and create inaccessible, often unreadable, color pairs.

Actual Accessibility is where it's at.

#darkmode #Webdesign
#a11y #color #webdev
#colour #wcag #apca

Writefreely CSS formatting tips and tricks

https://blog.baker.network/pamymaf/writefreely-css-formatting-tips-and-tricks