Saturday, August 26, 2017

WCAG 2.0 Color Contrast Ratios

Today I learned about WCAG 2.0 Color Contrast Ratio Requirements.

WCAG 2.0 requires that the foreground and background colors have a 4.5:1 contrast ratio at Level AA and a 7:1 contrast ratio at Level AAA.

Now, I don't know what a 7:1 contrast ratio looks like, but my gut feel is it's like black on white or white on black.

So, I'm targeting WCAG 2.0 AA Compliance for all my sites.  That's sort of the gold standard, anyway. 

My WCAG-compliant labels: 😊


.label-default {
    color: #FFF;
    background-color: #777;
}
.label-danger {
    color: #FFF;
    background-color: #a30909;
}
.label-warning {
    color: #FFF;
    background-color: #a36c06;
}
.label-success {
    color: #FFF;
    background-color: #124400;
}
.label-info {
    color: #FFF;
    background-color: #027091;
}
.label-primary {
    color: #FFF;
    background-color: #003FBB;
}

No comments:

Post a Comment