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
34036	Low text contrast over light blue backgrounds in admin light theme	Thibaud Colas	nobody	"The Django admin’s light theme ""primary"" color is a very light shade of blue which doesn’t offer enough contrast when used with white text.

Here is a [https://contrast-grid.eightshapes.com/?version=1.1.0&background-colors=%23fff%2C%20body-bg%0D%0A%23417690%2C%20header-bg%0D%0A%2379aec8%2C%20breadcrumbs-bg%0D%0A%23dfd%2C%20message-success-bg%0D%0A%23ffc%2C%20message-warning-bg%0D%0A%23ffefef%2C%20message-error-bg%0D%0A%23f8f8f8%2C%20darkened-bg%0D%0A%23e4e4e4%2C%20selected-bg%0D%0A%2379aec8%2C%20button-bg%0D%0A%23609ab6%2C%20button-hover-bg%0D%0A%23417690%2C%20default-button-bg%0D%0A%23205067%2C%20default-button-hover-bg%0D%0A%23888%2C%20close-button-bg%0D%0A%23747474%2C%20close-button-hover-bg%0D%0A%23ba2121%2C%20delete-button-bg%0D%0A%23a41515%2C%20delete-button-hover-bg&foreground-colors=%2379aec8%2C%20primary%0D%0A%23417690%2C%20secondary%0D%0A%23f5dd5d%2C%20accent%0D%0A%23fff%2C%20primary-fg%0D%0A%23333%2C%20body-fg%0D%0A%23666%2C%20body-quiet-color%0D%0A%23000%2C%20body-loud-color%0D%0A%23ffc%2C%20header-color%0D%0A%23f5dd5d%2C%20header-branding-color%0D%0A%23fff%2C%20header-link-color%0D%0A%23fff%2C%20breadcrumbs-link-fg%0D%0A%23c4dce8%2C%20breadcrumbs-fg%0D%0A%23447e9b%2C%20link-fg%0D%0A%23036%2C%20link-hover-color%0D%0A%235b80b2%2C%20link-selected-fg%0D%0A%23e8e8e8%2C%20hairline-color%0D%0A%23ccc%2C%20border-color%0D%0A%23ba2121%2C%20error-fg%0D%0A%23ffc%2C%20selected-row%0D%0A%23fff%2C%20button-fg&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 full contrast grid] of the light theme color palette for reference. The problematic ""light blue"" combos I have identified are:

1. Breadcrumbs text where the background --breadcrumbs-bg is light blue, and the text is either very light blue --breadcrumbs-fg, or white (both bad). We would need to either use a much darker shade of blue, or switch breadcrumbs text to a dark grey like --body-fg.
2. Table ""caption"" headers, with light blue bg and a text of either --header-color light yellow for current app, or white --header-link-color, both bad. Here we might be able to resolve this by switching those headers to using the --header-bg / --secondary shade of blue. Or use dark grey --body-fg text.
3. Fieldsets / modules h2 headers. Same as table caption headers.
4. Choosers’ ""chosen"" header. Same as table caption headers.
5. Non-""default"" submit buttons. Here we won’t be able to use the secondary blue since it’s already used for default submit buttons. So we’d need to either change the primary color, or use a dark grey --body-fg text.

Here is a screenshot of a truncated form with those issues illustrated: https://code.djangoproject.com/raw-attachment/ticket/34036/34036.png"	Bug	new	contrib.admin	4.0	Normal		accessibility, color contrast, ux		Unreviewed	0	0	0	0	0	1