product/develop/conditional-classes

ID:
product/develop/conditional-classes
Automated score:
98.3
URL:
https://stackoverflow.design/product/develop/conditional-classes
View JSON file

2 violations: Dark: 1 HC Light: 1

Ensures the contrast between foreground and background colors meets APCA custom level conformance minimums thresholds. Elements must meet APCA conformance minimums thresholds. Help URL

HTML

<div class="bar-sm p12 bg-yellow-300 fc-yellow-600 d:bg-green-300 d:fc-green-600">This element will be yellow text and background in light mode but will become green in dark mode.</div>

Target

.fc-yellow-600

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 59.97Lc (foreground color: #d1f0e0, background color: #2d8b5a, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

Ensure the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds. Elements must meet enhanced color contrast ratio thresholds. Help URL

HTML

<div class="bar-sm p12 bg-yellow-300 fc-yellow-600 d:bg-green-300 d:fc-green-600">This element will be yellow text and background in light mode but will become green in dark mode.</div>

Target

.fc-yellow-600

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.74 (foreground color: #554507, background color: #ecae13, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1