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

Color Accessibility threshold #2

Closed
oliviertassinari opened this issue May 6, 2020 · 0 comments · Fixed by #168
Closed

Color Accessibility threshold #2

oliviertassinari opened this issue May 6, 2020 · 0 comments · Fixed by #168
Labels
component: data grid This is the name of the generic UI component, not the React module! priority: important This change can make a difference

Comments

@oliviertassinari
Copy link
Member

oliviertassinari commented May 6, 2020 •
edited
Loading

Potential issue

Capture d’écran 2020-05-05 à 18 29 56

https://muix-storybook.netlify.app/?path=/story/real-data-demo--commodity

I see two issues in the above case:

  1. The color contrast of the checkbox is 1.39:1 https://webaim.org/resources/contrastchecker/?fcolor=F50057&bcolor=4A98EC. It fails to match the WCAG AA minimum accessibility target (4.5:1).
  2. Luckily, Google has us covered 🙂 https://material.io/design/interaction/states.html#selected

Potential solution

I think that we can solve the above problems with:

  1. Use the primary color for the Checkbox
  2. Patch the selected background color until we update the value to match the specification in the core. 8% of the opacity of the primary in light mode and 16% in dark mode.
@oliviertassinari oliviertassinari added the priority: important This change can make a difference label Aug 3, 2020
@dtassone dtassone mentioned this issue Sep 8, 2020
Merged
@emily-ellevation emily-ellevation mentioned this issue Feb 18, 2021
Closed
1 task
michaldudak added a commit to michaldudak/mui-x that referenced this issue Sep 21, 2021
@michaldudak
[Charts] Update to X v5 (mui#2)
f95ddbd
Quppa added a commit to Quppa/material-ui-x that referenced this issue Dec 21, 2021
@Quppa
Attempt mui#2 at passing sortingOrder down
b94f3bf
@alexmarmon alexmarmon mentioned this issue Oct 19, 2022
Closed
2 tasks
oliviertassinari referenced this issue in oliviertassinari/mui-x Nov 12, 2022
@oliviertassinari
suggestion #2
ca90eab
@oliviertassinari oliviertassinari added the component: data grid This is the name of the generic UI component, not the React module! label Jan 17, 2023
@vishal-kadmos vishal-kadmos mentioned this issue Jun 30, 2023
Closed
2 tasks
@Janpot Janpot mentioned this issue Jul 18, 2023
Merged
@nalbion nalbion mentioned this issue Jan 3, 2024
Closed
@nico-martinucci nico-martinucci mentioned this issue Jan 10, 2024
Closed
4 tasks
@layerok layerok mentioned this issue May 13, 2024
Closed
@WestCornfield WestCornfield mentioned this issue Jul 30, 2024
Open
1 task
@Manikandasubramani Manikandasubramani mentioned this issue Aug 12, 2024
Closed
This was referenced Oct 15, 2024
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: data grid This is the name of the generic UI component, not the React module! priority: important This change can make a difference
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[DataGrid] Replace style-components with @material-ui/styles dtassone/material-ui-x
1 participant
@oliviertassinari