CODEWITHSUNDEEP
reactjsmaterial-ui
radovix
radovix

Reputation: 3177

How to disable Material-UI contrast ratio console errors?

My console is full of

Material-UI: the contrast ratio of 2.590660811372324:1 for #fff on #5EB44B falls below the WCAG recommended absolute minimum contrast ratio of 3:1.

error messages which I would like to hide. Is there a way how to do that? I've done the research but could find anything useful.

Here is my createMuiTheme code

createMuiTheme({
  themeName: 'radovix',
  palette: {
    primary: {
      main: '#5EB44B'
    }
  },
  contrastThreshold: 2
});

Note, I'm aware that best approach would be changing the colors that I'm using and therefore solving the error, but that is not possible in my case.

Upvotes: 4

Views: 2904

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 81026

This console error is produced by getContrastText which is used whenever a contrastText color is not explicitly specified.

Instead of specifying contrastThreshold: 2, I would recommend explicitly specifying the desired contrastText color for those cases where the default contrastThreshold of 3 does not pick the one you want. Customization of contrastThreshold is really only intended for increasing the threshold -- not for decreasing it.

Here's a working example:

import React from "react";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import { common } from "@material-ui/core/colors";
const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#5EB44B",
      contrastText: common.white
    }
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="primary" variant="contained">
        Primary Color Button
      </Button>
    </ThemeProvider>
  );
}

Edit contrastText

Upvotes: 4

Related Questions