id summary reporter owner description type status component version severity resolution keywords cc stage has_patch needs_docs needs_tests needs_better_patch easy ui_ux 33727 Color contrast issues in admin header area Thibaud Colas Mohammed Y. Alnajdi "There are three color contrast issues in the Django admin area: - The `

`’s yellow only has enough contrast against the blue for large text, which is defined by [https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html SC 1.4.3: Contrast (Minimum)] as 18pt and up (24px). This works for large viewports, but on smaller ones the heading’s font size is reduced to 20px / 1.25rem, which is too small to qualify as large text. - In light mode, the links’ hover color doesn’t have enough contrast with the background - In dark mode, same issue with the links’ hover color (but with a different color) Here is a [https://contrast-grid.eightshapes.com/?version=1.1.0&background-colors=%23417690%2C%20--header-bg&foreground-colors=%23f5dd5d%2C%20--accent%0D%0A%23264b5d%2C%20--primary%20(dark)%0D%0A%2379aec8%2C%20--primary%20(light)&es-color-form__tile-size=compact&es-color-form__show-contrast=aaa&es-color-form__show-contrast=aa&es-color-form__show-contrast=aa18&es-color-form__show-contrast=dnp contrast grid] with the relevant color contrasts. And a screenshot of two out of three issues: [[Image(https://code.djangoproject.com/raw-attachment/ticket/33727/admin-contrast.png)]] --- My recommended solutions for this are to: - Keep the ""small viewport"" heading at 24px - Change the hover effect for links in the header – either remove it (with the cursor change only), or remove the text underline rather than changing the color." Bug closed contrib.admin dev Normal fixed accessibility, color contrast Ready for checkin 1 0 0 0 1 1