cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="alert alert-success text-center">This pen passes aXe tool
    accessibility validation analysis, including html lang="en" (which Codepen doesn't appear to support - see closing paragraph). You might notice that this alert's style is slightly different from Bootstrap's default colors too (by default, they also fail).
</div>

<h1>Accessible button variant colors <small>(WCAG 2.0 AA)</small></h1>

<p>As it turns out, finding adequate color combinations to meet WCAG 2.0 AA color contrast guidelines is pretty tricky, especially when considering button types that visually convey a page button hierarchy. Bootstrap version 3 (in this pen we are using (
    <a href="https://getbootstrap.com/css/#buttons-options" target="_blank">Bootstrap 3.3.7</a>
    ) ) button color variants
    <strong> fail WCAG 2.0 AA color contrast compliance</strong> for btn-success, btn-info, btn-warning and btn-danger (also, btn-link may fail depending on the background on which it's placed).
</p>

<p>The following represents all the usual Bootstrap button variants, only using colors that meet the WCAG 2.0 AA guidelines.</p>

<hr role="presentation">

<div class="sample">
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-link">Link</button>
</div>

<hr role="presentation">

<div class="row">
  <div class="col-md-6">
    <h2>Color Palette</h2>
    <pre><code>
        // COLOR PALETTE VARIABLES
          $gray-dark: #212529;
          $gray: #495057;
          $gray-light: #adb5bd;
          $brand-primary: #1b6ec2;
          $brand-success: #396f3a;
          $brand-warning: #b24d04;
          $brand-danger: #c92a2a;
          $brand-info: #0b7285;
          
        // VARIABLES IN USE IN THIS PEN
          $link-color: $brand-primary;
          $link-hover-color: darken($link-color, 15%);
          $btn-link-disabled-color: $gray-light;

    </code></pre>

    <p>Here's a link to <a href="https://codepen.io/scottloway/pen/Xjazjw.scss" target="_blank">this codepen's .scss</a>.</p>
    <p>Basically, the bulk of the effort here was finding the appropriate color combinations, and then leveraging existing bootstrap/sass to style the button variants.</p>
    <h3>Important Note</h3>
    <p>Notice that the btn-link style has a transparent background, which means you will need to be very careful about it's placement. This style assumes it will be placed on a very light (e.g. white) background; <a href="http://contrastchecker.com/" target="_blank">TEST your color contrast</a> for usages of this button variant to ensure they are each compliant. All other button types will be color contrast compliant irrespective of where they are placed.</p>
  </div>
  <div class="col-md-6">
    <h2>Button Variant Variables</h2>
    <pre><code>
      // BUTTON VARIANT VARIABLES
        $btn-default-color: #fff;
        $btn-default-bg: $gray;
        $btn-default-color-hover: #fff;
        $btn-default-bg-start: $btn-default-bg;
        $btn-default-bg-end: darken($btn-default-bg, 10%);
        $btn-default-border: darken($btn-default-bg, 5%);;

        $btn-primary-color: #fff;
        $btn-primary-bg: $brand-primary;
        $btn-primary-bg-start: $btn-primary-bg;
        $btn-primary-bg-end: darken($btn-primary-bg, 10%);
        $btn-primary-border: darken($btn-primary-bg, 5%);

        $btn-primary-inverse-color: $btn-primary-bg;
        $btn-primary-inverse-bg: $btn-primary-color;

        $btn-success-color: #fff;
        $btn-success-bg: $brand-success;
        $btn-success-bg-start: $btn-success-bg;
        $btn-success-bg-end: darken($btn-success-bg, 10%);
        $btn-success-border: darken($btn-success-bg, 5%);

        $btn-warning-color: #fff;
        $btn-warning-bg: $brand-warning;
        $btn-warning-bg-start: $btn-warning-bg;
        $btn-warning-bg-end: darken($btn-warning-bg, 10%);
        $btn-warning-border: darken($btn-warning-bg, 5%);

        $btn-danger-color: #fff;
        $btn-danger-bg: $brand-danger;
        $btn-danger-bg-start: $btn-danger-bg;
        $btn-danger-bg-end: darken($btn-danger-bg, 10%);
        $btn-danger-border: darken($btn-danger-bg, 5%);

        $btn-info-color: #fff;
        $btn-info-bg: $brand-info;
        $btn-info-bg-start: $btn-info-bg;
        $btn-info-bg-end: darken($btn-info-bg, 10%);
        $btn-info-border: darken($btn-info-bg, 5%);

        $btn-disabled-color: $gray-dark;
        $btn-disabled-bg-color: $gray-light;
    </code></pre>
  </div>
</div>

<h2>Recommended Reading</h2>

<ul>
    <li>Good write up at CSS Tricks about
        <a href="https://css-tricks.com/use-button-element/" target="_blank">when to use a button</a>
    </li>
    <li>For more information on the guideline:
        <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" target="_blank">https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html</a>
    </li>
    <li>This pen provided WCAG 2.0 AA color contrast compliant button variants. Colors initially based on:
        <a href="https://yeun.github.io/open-color/swatches.html" target="_blank">Open Color</a>
    </li>
    <li>Axe tool extension for
        <a href="https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd" target="_blank">Chrome</a>
    </li>
    <li>Background on Deque's <a href="http://www.deque.com/products/axe/" target="_blank">aXe tool</a></li>
    <li>
        <a href="http://contrastchecker.com/" target="_blank">WCAG Color Contrast Checker</a>
    </li>
</ul>

<h2>Codepen lang="en" on html element</h2>
<p>WCAG also requires
    <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-doc-lang-id.html" target="_blank">Language of Page</a>
    to be defined, however Codepen doesn't appear to have a means of declaring your page's language. However, they do allow you to add class names to the html element, so we can just hack that a little.
<p>
    Under your Codepen's "Settings" menu button, for the input labeled "Add Class(es) to &lt;html&gt;", enter:
    <code>"your-class-names-here" lang="en</code>
    .
</p>

<div class="well">
  See the complete Pen <a href="https://codepen.io/scottloway/pen/Xjazjw/">Accessible button variant colors (WCAG 2.0 AA)</a> by Scott Galloway (<a href="https://codepen.io/scottloway">@scottloway</a>) on <a href="https://codepen.io">CodePen</a>.
</div>
            
          
!
            
              // PEN STYLES
body {
  padding: 5vh 10vw; 
  font-size: 16px;
}

h1 {
  margin-bottom: 30px;
  font-size: 3em;
}

.label {
  border-radius: 0;
}

.sample {
  margin: 30px 0;
  text-align: center;
}

.alert-success {
  background: #ebfbee;
  color: #396f3a;
}

a {
  color: #1b6ec2;
}

// ----------------------------------
// -- BEGIN BUTTON VARIANT STYLING --
// ----------------------------------

// COLOR PALETTE VARIABLES
  $gray-dark: #212529;
  $gray: #495057;
  $gray-light: #adb5bd;
  $brand-primary: #1b6ec2;
  $brand-success: #396f3a;
  $brand-warning: #b24d04;
  $brand-danger: #c92a2a;
  $brand-info: #0b7285;

// VARIABLES IN USE FOR BELOW SCSS
  $link-color: $brand-primary;
  $link-hover-color: darken($link-color, 15%);
  $btn-link-disabled-color: $gray-light;

// BUTTON VARIANT VARIABLES
  $btn-default-color: #fff;
  $btn-default-bg: $gray;
  $btn-default-color-hover: #fff;
  $btn-default-bg-start: $btn-default-bg;
  $btn-default-bg-end: darken($btn-default-bg, 10%);
  $btn-default-border: darken($btn-default-bg, 5%);;

  $btn-primary-color: #fff;
  $btn-primary-bg: $brand-primary;
  $btn-primary-bg-start: $btn-primary-bg;
  $btn-primary-bg-end: darken($btn-primary-bg, 10%);
  $btn-primary-border: darken($btn-primary-bg, 5%);

  $btn-primary-inverse-color: $btn-primary-bg;
  $btn-primary-inverse-bg: $btn-primary-color;

  $btn-success-color: #fff;
  $btn-success-bg: $brand-success;
  $btn-success-bg-start: $btn-success-bg;
  $btn-success-bg-end: darken($btn-success-bg, 10%);
  $btn-success-border: darken($btn-success-bg, 5%);

  $btn-warning-color: #fff;
  $btn-warning-bg: $brand-warning;
  $btn-warning-bg-start: $btn-warning-bg;
  $btn-warning-bg-end: darken($btn-warning-bg, 10%);
  $btn-warning-border: darken($btn-warning-bg, 5%);

  $btn-danger-color: #fff;
  $btn-danger-bg: $brand-danger;
  $btn-danger-bg-start: $btn-danger-bg;
  $btn-danger-bg-end: darken($btn-danger-bg, 10%);
  $btn-danger-border: darken($btn-danger-bg, 5%);

  $btn-info-color: #fff;
  $btn-info-bg: $brand-info;
  $btn-info-bg-start: $btn-info-bg;
  $btn-info-bg-end: darken($btn-info-bg, 10%);
  $btn-info-border: darken($btn-info-bg, 5%);

  $btn-disabled-color: $gray-dark;
  $btn-disabled-bg-color: $gray-light;

// THE FOLLOWING IS FROM BOOTSTRAP...

// Button variants
// -------------------------
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
@mixin button-variant($color, $background, $border) {
  color: $color;
  background-color: $background;
  border-color: $border;

  &:hover,
  &:focus,
  &:active,
  &.active,
  .open &.dropdown-toggle {
    color: $color;
    background-color: darken($background, 8%);
    border-color: darken($border, 12%);
  }
  &:active,
  &.active,
  .open &.dropdown-toggle {
    background-image: none;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      background-color: $background;
      border-color: $border
    }
  }
}


//
// Buttons
// --------------------------------------------------


// Alternate buttons
// --------------------------------------------------

.btn-default {
  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
}

.btn-primary {
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}

// Warning appears as orange
.btn-warning {
  @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
}

// Danger and error appear as red
.btn-danger {
  @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
}

// Success appears as green
.btn-success {
  @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
}

// Info appears as blue-green
.btn-info {
  @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
}

// Link buttons
// -------------------------

// Make a button look and behave like a link
.btn-link {
  color: $link-color;
  font-weight: normal;
  cursor: pointer;
  border-radius: 0;

  &,
  &:active,
  &[disabled],
  fieldset[disabled] & {
    background-color: transparent;
    box-shadow: none;
  }
  &,
  &:hover,
  &:focus,
  &:active {
    border-color: transparent;
  }
  &:hover,
  &:focus {
    color: $link-hover-color;
    text-decoration: underline;
    background-color: transparent;
  }
  &[disabled],
  fieldset[disabled] & {
    &:hover,
    &:focus {
      color: $btn-link-disabled-color;
      text-decoration: none;
    }
  }
}
            
          
!
999px
Loading ..................

Console