Skip to content

Instantly share code, notes, and snippets.

@wave-inguane
Last active August 21, 2021 04:07
Show Gist options
  • Save wave-inguane/1219bf80acf4e1b7c1146fe8b4a1ef95 to your computer and use it in GitHub Desktop.
Save wave-inguane/1219bf80acf4e1b7c1146fe8b4a1ef95 to your computer and use it in GitHub Desktop.
508Utils
508
---------------------------------------------------------------------------
Accessibility and Contrast for Themes
The links below are just a sample of the available resources for accessibility education and testing. ServiceNow does not endorse the veracity of the sites provided, and encourages research to determine if these are the best for your needs.
WebAIM blog article describing the accessibility color requirements, and considerations for links.
COLOR & LINKS
https://webaim.org/blog/wcag-2-0-and-link-colors/
WebAIM article explaining colors and contrast, along with an explanation of the contrast minimum.
COLOR CONTRAST
https://webaim.org/articles/contrast/
A contrast checker into which you can enter the color codes to see the contrast ratio.
CONTRAST CHECKER
https://webaim.org/resources/contrastchecker/
Enter the desired colors, and see which ones are accessible based on background and text combinations.
BUILDING PALETTES
https://toolness.github.io/accessible-color-matrix/
The mobile apps have been designed with accessibility in mind, and should meet accessibility requirements if not altered.
An introduction to the Web Content and Accessibility Guidelines (WCAG). This is a general overview and not specific to mobile.
WCAG 2
https://www.w3.org/WAI/standards-guidelines/wcag/?=dg
A description of W3C's mobile accessbility.
MOBILE @ W3C
https://www.w3.org/WAI/standards-guidelines/mobile/
Details on how WCAG 2.0 and other W3C/WAI guidelines apply to mobile.
MOBILE WCAG/W3C
https://www.w3.org/TR/mobile-accessibility-mapping/
A description of contrast minimum standards for web accessibility.
CONTRAST MINIMUM
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
Portal or Page
//BLACK BOLD VARIABLES
.field-label {
color: black !important;
font-weight: bold;
}
label{
font-weight: bold !important;
color: black;
}
.text-muted{
color: black !important;
}
label {
font-weight: bold !important;
color: black !important;
}
.sc-field-error-label {
color: white !important;
}
https://usepadev.servicenowservices.com/nav_to.do?uri=%2Fsp_css.do%3Fsys_id%3D884753c91b4610104614ddb6bc4bcbbd%26sysparm_record_target%3Dsp_css%26sysparm_record_row%3D1%26sysparm_record_rows%3D21%26sysparm_record_list%3DORDERBYname
https://usepadev.servicenowservices.com/sp_config?id=page_edit&p=sc_cat_item&table=sp_instance&sys_id=db29e43cdb883380fe257e721f9619c1
https://usepadev.servicenowservices.com/sp_config?id=page_edit&p=sc_cat_item&table=sp_instance&sys_id=db29e43cdb883380fe257e721f9619c1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment