mui / mui/material-ui

[docs] [Joy-UI] Theme colour specifications and accessibility guidelines

Open
#46,306 2 comments 0 reactions 1 assignee View on GitHub

@siriwatknp is already working on this.

Since Jun 9, 2025.

docs package: joy-ui scope: all components
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Related page

https://mui.com/joy-ui/customization/theme-colors/

Kind of issue

Missing information

Issue description

The documentation does not seem to include any information regarding the accessibility specifications of the colour palette used when customising the theme with extendTheme(...). This is confusing, since it mentions several improvements made to the default colour palette in v5.0.0-beta.0 but does not dive deeper into details such as:

  • minimum contrast ratio between each hue
  • min and max luminance
  • handling of cases where the primary colour is similar to a semantic one such as green, yellow or red
Context

I am trying to implement a custom theme including my company's brand colour as primary, but cannot find any relevant tools to generate the palette, nor do I see any specs regarding its creation.

Search keywords

colours, theme, accessibility, material palette, hues, wcag, palette generation, specifications

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.