Quasar Color Palette Contrast Checker

Test the eight Quasar brand colors against WCAG 2.2 in light and dark mode, and get the nearest accessible shade that passes.

Brand colors
WCAG level
Normal text, 4.5:1. Large text is 24px, or 18.7px bold.
Results
7 of 15 checks fail AA
primary#1976D2
Aa
White text
also on white
4.60:1
Pass
Aa
Dark text
text-color="dark"
3.66:1
Fail
Aa
On the dark page
as text in dark mode
4.07:1
Fail
#247EDA
secondary#26A69A
Aa
White text
also on white
2.99:1
Fail
#00857B
Aa
Dark text
text-color="dark"
5.62:1
Pass
Aa
On the dark page
as text in dark mode
6.24:1
Pass
Or keep #26A69A and give its buttons dark text: <q-btn color="secondary" text-color="dark" />
accent#9C27B0
Aa
White text
also on white
6.30:1
Pass
Aa
Dark text
text-color="dark"
2.67:1
Fail
Aa
On the dark page
as text in dark mode
2.97:1
Fail
#BC4BD0
dark#1D1D1D
Aa
White text
on dark surfaces
16.85:1
Pass
positive#21BA45
Aa
White text
also on white
2.56:1
Fail
#00892B
Aa
Dark text
text-color="dark"
6.56:1
Pass
Aa
On the dark page
as text in dark mode
7.29:1
Pass
Or keep #21BA45 and give its buttons dark text: <q-btn color="positive" text-color="dark" />
negative#C10015
Aa
White text
also on white
6.40:1
Pass
Aa
Dark text
text-color="dark"
2.63:1
Fail
Aa
On the dark page
as text in dark mode
2.92:1
Fail
#E63B37
info#31CCEC
Aa
White text
also on white
1.91:1
Fail
#008299
Aa
Dark text
text-color="dark"
8.81:1
Pass
Aa
On the dark page
as text in dark mode
9.79:1
Pass
Or keep #31CCEC and give its buttons dark text: <q-btn color="info" text-color="dark" />
warning#F2C037
Aa
White text
also on white
1.69:1
Fail
#947200
Aa
Dark text
text-color="dark"
9.93:1
Pass
Aa
On the dark page
as text in dark mode
11.03:1
Pass
Or keep #F2C037 and give its buttons dark text: <q-btn color="warning" text-color="dark" />
Your palette as code 
// src/css/quasar.variables.scss
$primary   : #1976D2;
$secondary : #26A69A;
$accent    : #9C27B0;

$dark      : #1D1D1D;
$dark-page : #121212;

$positive  : #21BA45;
$negative  : #C10015;
$info      : #31CCEC;
$warning   : #F2C037;
Replace the brand variables in src/css/quasar.variables.scss of a Quasar CLI app. The body--dark block goes in src/css/app.scss and switches those colors when dark mode is on. If quasar.config sets framework.config.brand, remove those keys: Quasar writes them inline on the body, where they win over both files.

How to use the Quasar Color Palette Contrast Checker

  1. Type or pick your eight brand colors and the dark page background, or click Import and paste a Theme Builder share link or your quasar.variables.scss.
  2. Choose the WCAG level: AA for normal text (4.5:1), AA large for large text, icons and other UI parts (3:1), or AAA (7:1).
  3. Read each color's checks: white text on it, which is what a filled q-btn renders, dark text on it, and the color as text on the dark page.
  4. Click Use on a failing check to swap in the nearest shade of the same hue that passes, or Use in dark mode to switch only the dark mode color.
  5. Copy the code and paste it over the brand variables in src/css/quasar.variables.scss, plus the body--dark block into src/css/app.scss.

Building the palette from scratch? The Theme Builder gives every brand color a full shade scale with separate light and dark mode stops, and its share link imports here.

Frequently asked questions