How to disable Material-UI contrast ratio console errors? - reactjs

Question

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.

Answer 1

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>
);
}