Bug #106150
open
Improve contrast in backend dark mode for Better Usability
0%
Description
The dark mode in the backend appears confusing.
While the exact cause is unclear, it seems to be due to insufficient contrast between various interface elements.
Increasing the contrast by approximately 10% could significantly improve readability and overall usability.
Files
Updated by Ian Solo about 1 month ago
Updated by Chris Müller about 1 month ago
- Category set to Backend User Interface
- Status changed from New to Needs Feedback
Can you give examples, where you think the contrast is too low? Maybe also attach screenshots which show the problems.
Updated by Benjamin Kott about 1 month ago
This one is hard to grasp, i measured the contrast ratios again and we have the best overall contrasts for the examples given.
This includes border to background, and text to background ratios.
Updated by Ian Solo about 1 month ago
In the case of forms, I think the input background should be lighter than the background of their container (usually in dark themes this is the case).
At the moment, the input background is:--typo3-input-bg: var(--typo3-surface-container-lowest); and the form section background is:--typo3-form-section-bg: var(--typo3-surface-container-low);
But it would be better if it were:--typo3-input-bg: var(--typo3-surface-container-base);
--typo3-form-section-bg: var(--typo3-surface-container-lowest);
(See attachment: form.png)
Updated by Ian Solo about 1 month ago
As far as the page module and the list module are concerned, there is practically no contrast between the background of the various sections (1) and the background of their containers (2).
Therefore, it is difficult for an editor, especially an inexperienced one, to distinguish the various sections.
(see attachments: page.png; list.png)