Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Correct CSS to match brand color palette and meet accessibility requirements #9427

Closed
6 of 10 tasks
Tracked by #9495
atsansone opened this issue Sep 19, 2023 · 3 comments · Fixed by #9432
Closed
6 of 10 tasks
Tracked by #9495

Correct CSS to match brand color palette and meet accessibility requirements #9427

atsansone opened this issue Sep 19, 2023 · 3 comments · Fixed by #9432
Assignees
@atsansone
Labels
e2-days Effort: < 5 days infra.design Relates to the design of docs.flutter.dev infra.structure Relates to the tools that create docs.flutter.dev p1-high Major but not urgent concern: Resolve in months. Update each month. t.a11y Relates to an accessibility concern

Comments

@atsansone
Copy link
Contributor

atsansone commented Sep 19, 2023 •
edited
Loading

Five of fifteen colors in the _variables.scss match the Flutter branding guidelines. This results in multiple violations of WCAG 2.0 G18 and GAR criteria 1.4.

These colors should be updated to the proper color and contrast.

_buttons.scss

  • Update .btn-primary to #0468D7

_banner.scss

  • Update .site-banner to #0553B1
  • Update .site-banner a to #B8EAFE

_reboot.scss

  • Update a to #0468D7

_code.scss

  • Update code to #158477

_rfs.scss

  • Update h1 to 3rem
  • Update h2 to 2rem
  • Update h3 to 1.5rem
  • Update h4 to 1.3125rem
  • Update h5 to 1.125rem
@atsansone atsansone self-assigned this Sep 19, 2023
@parlough
Copy link
Member

Photo of a gar underwater

@parlough parlough added infra.design Relates to the design of docs.flutter.dev p1-high Major but not urgent concern: Resolve in months. Update each month. t.a11y Relates to an accessibility concern e2-days Effort: < 5 days infra.structure Relates to the tools that create docs.flutter.dev labels Sep 19, 2023
@atsansone atsansone mentioned this issue Sep 20, 2023
Merged
@parlough
Copy link
Member

parlough commented Oct 5, 2023

As a note, don't worry about the code snippet colors as part of this work. Other work I'm doing (dart-lang/site-www#3846) and hopefully opening a PR for soon (first on site-www) will completely overhaul those.

@atsansone atsansone mentioned this issue Oct 9, 2023
Open
32 tasks
@atsansone atsansone mentioned this issue Oct 24, 2023
Closed
atsansone added a commit that referenced this issue Oct 25, 2023
@atsansone @parlough
Updates colors for a11y contrast requirements (#9432)
5001637 
Fixes #9427

Staged: https://tony-flutter-site--docs-6warcibu.web.app

This doesn't cover updates to the lexer colors. That will happen later.

These changes:

- Darkened text color to create the required contrast between body
background. (Current 3.49:1, Needs 4.5:1)
- Darkened background color of button to contrast with link text.
(Current 3.79:1, Needs 4.5:1)
- Darkened text color of code text to contrast with the background.
(Current 3.99:1, Needs 4.5:1)
- Darkened text color of copy to contrast with the link text. (Current
2.54, Needs 3:1)
- Change heading font settings to Design Standards.

Current:


![image](https://github.com/flutter/website/assets/706219/bf85e141-b2e8-4b21-a6fd-0c78f2c67f10)

Changed:


![image](https://github.com/flutter/website/assets/706219/515d454e-e39f-4d1b-875d-0026373db12a)

---------

Co-authored-by: Parker Lougheed <[email protected]>
atsansone added a commit to atsansone/website that referenced this issue Oct 25, 2023
@atsansone @parlough
Updates colors for a11y contrast requirements (flutter#9432)
ed5d0df 
Fixes flutter#9427

Staged: https://tony-flutter-site--docs-6warcibu.web.app

This doesn't cover updates to the lexer colors. That will happen later.

These changes:

- Darkened text color to create the required contrast between body
background. (Current 3.49:1, Needs 4.5:1)
- Darkened background color of button to contrast with link text.
(Current 3.79:1, Needs 4.5:1)
- Darkened text color of code text to contrast with the background.
(Current 3.99:1, Needs 4.5:1)
- Darkened text color of copy to contrast with the link text. (Current
2.54, Needs 3:1)
- Change heading font settings to Design Standards.

Current:

![image](https://github.com/flutter/website/assets/706219/bf85e141-b2e8-4b21-a6fd-0c78f2c67f10)

Changed:

![image](https://github.com/flutter/website/assets/706219/515d454e-e39f-4d1b-875d-0026373db12a)

---------

Co-authored-by: Parker Lougheed <[email protected]>
@atsansone
Copy link
Contributor Author

This removed 68,838 errors.

atsansone added a commit to atsansone/website that referenced this issue Nov 14, 2023
@atsansone @parlough
Updates colors for a11y contrast requirements (flutter#9432)
b8cb771 
Fixes flutter#9427

Staged: https://tony-flutter-site--docs-6warcibu.web.app

This doesn't cover updates to the lexer colors. That will happen later.

These changes:

- Darkened text color to create the required contrast between body
background. (Current 3.49:1, Needs 4.5:1)
- Darkened background color of button to contrast with link text.
(Current 3.79:1, Needs 4.5:1)
- Darkened text color of code text to contrast with the background.
(Current 3.99:1, Needs 4.5:1)
- Darkened text color of copy to contrast with the link text. (Current
2.54, Needs 3:1)
- Change heading font settings to Design Standards.

Current:


![image](https://github.com/flutter/website/assets/706219/bf85e141-b2e8-4b21-a6fd-0c78f2c67f10)

Changed:


![image](https://github.com/flutter/website/assets/706219/515d454e-e39f-4d1b-875d-0026373db12a)

---------

Co-authored-by: Parker Lougheed <[email protected]>
@atsansone atsansone mentioned this issue Jan 29, 2024
Closed
@sfshaza2 sfshaza2 changed the title Correct CSS to match brand color palette and meet GAR requirements Correct CSS to match brand color palette and meet accessibility requirements Oct 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@atsansone atsansone

Labels
e2-days Effort: < 5 days infra.design Relates to the design of docs.flutter.dev infra.structure Relates to the tools that create docs.flutter.dev p1-high Major but not urgent concern: Resolve in months. Update each month. t.a11y Relates to an accessibility concern
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Updates colors for a11y contrast requirements atsansone/website
2 participants
@atsansone @parlough