[ ] 5. Start a style guide on this project's wiki and explain how to use the color scheme.
[x] 6. Change the CSS properties used in blog/static/colors.css and blog/static/style.css to use your new colors. Rename them to describe either what colors they are or what elements they should be used for.
[x] 7. Update this issue and ask someone to review it.
Acceptance criteria:
[x] Headers will have a >=3:1 contrast ratio with any background on which they'll appear.
[x] Normal text will have a >=4.5:1 contrast ratio with any background on which it will appear.
[x] UI components like buttons will have a >=3:1 contrast ratio with any background on which they will appear.
Suggested steps:
[x] 1. Assign yourself to this issue.
[x] 2. Pick some colors you like. I like these tools: Coolors and ColorHexa. A good set of colors to have would be:
a primary color, a more muted tint/shade, and a more intense tint/shade
a secondary color, a muted version, and an intense version
an accent color, a muted version, and an intense version
"white" (a very light color for light-mode background and dark-mode text)
"black" (a very dark color for light-mode text and dark-mode background
[x] 3. Decide which colors should be used for backgrounds, headers, normal text, links, etc.
[x] 4. Use a color contrast checker to check your palette for accessibility.
[ ] 5. Start a style guide on this project's wiki and explain how to use the color scheme.
[x] 6. Change the CSS properties used in
blog/static/colors.css
andblog/static/style.css
to use your new colors. Rename them to describe either what colors they are or what elements they should be used for.[x] 7. Update this issue and ask someone to review it.
Acceptance criteria:
More info: