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