4  Color Contrast

4.1 Ensure Accessible Color Contrast

Color contrast is essential for users with visual impairments. Making sufficient color contrast between text and background ensures the content is readable.

For HTML output (this also includes HTML documents rendered by R Markdown), you can improve color contrast by setting appropriate themes and writing a custom .css file.

  1. Start by selecting a theme and syntax highlighting style that meet accessibility standards in Markdown and Quarto. Here are some recommended YAML settings:
format:
  html:
  theme: cosmo            # Good general theme with contrast
  highlight-style: github #Accessible code block colors

  1. After setting up your file, check if it passes accessibility standards using accessibility check tools.

  2. If the accessibility checkers still report color contrast issues, override the wrong colors by using a custom style sheet. Below is some example code. To write this file, we referred to Rfor econometrics and used ChatGPT to meet contrast requirements. You can use AI tools to generate CSS code that meets color contrast standards with the below prompt.

Prompt: Please generate a CSS (or SCSS) file that improves color contrast to meet WCAG AA standards for my HTML webpage. Here are the specific contrast issues I need to fix: [include issues from accessibility checker]

/*-- css:set defaults color --*/

$primary: #004c99 !default;
$font-size-root: 18px !default;

/*-- css: sidebar settings --*/

.sidebar-title {
  color: #004c99;
}

div.sidebar-item-container .active {
  font-weight: bold;
}


.sidebar nav[role=doc-toc] ul>li>a.active, .sidebar nav[role=doc-toc] ul>li>ul>li>a.active{
  font-weight: bold;
}

/* toc section number */
[id^="toc-"] .header-section-number {
  color: ;
}

#toc-prerequisites a.active .header-section-number {
  color: $primary;
}

/* main header section number */
h3 .header-section-number,
h4 .header-section-number,
h5 .header-section-number,
h6 .header-section-number{
  color: #666666;
}


/* Code */

code {
  color: #373a3c;
}

code a:any-link {
  text-decoration: underline;
  text-decoration-color: #ccc;
}

pre {
  background-image: linear-gradient(160deg,#f8f8f8 0,#f1f1f1 100%);
}


ul {
  list-style-type: disc;
}

4.1.1 Resources

Theme and Highlighting Style Resources: Quarto HTML Themes Syntax Highlighting Styles.

Custom Style Sheet Resources: CSS color reference WebAIM color contrast checker.