Hi, I worked on a theme that meets the contrast ratio as described in #357, i went over all text colors and their background colors they appear on to check the contrast ratios. I am not sure whether the changes fall into the "purely cosmetic" changes or not. I guess thats up to you to decide.
Though, i also encountered a small bug in theming caused by a typo.
Closes #357
Approach
The changes are done by inspecting the app using chromium-based dev tools. The dev-tools report the contrast ratios to their respective backgrounds. Every ratio – that i've found that was less then 4.5 – was updated using the automatic "next best" color that satisfies the ratio requirements for accessibility by clicking the button marked with the red arrow in the following screenshot:
In some cases, i took the creative freedom to match some of the colors to match better in their hue based on hsl color theory. I tried to match the original style as well as possible. Let me know if i should revert some of the changes.
I was only able to meet the contrast requirements by separating accent-text colors for content and header through the introduction of a new header-accent-text color.
Before-and-after Comparison
current themes on the left, new proposal on the right.
silverwind
commented
8 months ago
Hi, I worked on a theme that meets the contrast ratio as described in #357, i went over all text colors and their background colors they appear on to check the contrast ratios. I am not sure whether the changes fall into the "purely cosmetic" changes or not. I guess thats up to you to decide.
Though, i also encountered a small bug in theming caused by a typo.
Closes #357
Approach
The changes are done by inspecting the app using chromium-based dev tools. The dev-tools report the contrast ratios to their respective backgrounds. Every ratio – that i've found that was less then 4.5 – was updated using the automatic "next best" color that satisfies the ratio requirements for accessibility by clicking the button marked with the red arrow in the following screenshot:
In some cases, i took the creative freedom to match some of the colors to match better in their hue based on hsl color theory. I tried to match the original style as well as possible. Let me know if i should revert some of the changes.
I was only able to meet the contrast requirements by separating accent-text colors for content and header through the introduction of a new header-accent-text color.
Before-and-after Comparison
current themes on the left, new proposal on the right.
Light theme
Dark theme