Skip to Content
LINXS ADA Coordinator

Colophon

This website is coded in HTML5, CSS3, and various web-scripting languages including JavaScript and PHP. Backend services are provided through a content management system (CMS).

Brand Colors

Back to top of page

In addition to “basic” black and white, accessibledesign.pro uses three branding colors:

The “visual contrast accessibility” of these colors, including several variations, is summarized in a Color Contrast Values table.

Brand Typography

Back to top of page

When the website is in its default state, most body text and tabular data is composed with the Roboto typeface, while most headings (including table captions and headers) use the Comfortaa typeface. The latter is considered the brand typeface for accessibledesign.pro and its project sites. Both of these typefaces are available for free (along with many others) from Google Fonts.

Brand Examples

Back to top of page

The following are examples of how the brand colors and brand typography are used throughout this site.

Caption
Heading Text Heading Text Heading Text Heading Text
Body Text Body Text Body Text Body Text
Footing Text Footing Text Footing Text Footing Text

Log Table Caption (<h3>)

Log Header Log Header (sorted) Log Header Log Header
Log Entry Log Data Log Data Log Data
Log Entry Log Data Log Data Log Data
Log Entry Log Data Log Data Log Data
Log Footer (rarely used)
Tables

Heading Level 2 (<h2>)

Example of body text.

Heading Level 3 (<h3>)

Example of body text.

Heading Level 4 (<h4>)

Example of body text.

Heading Level 5 (<h5>)

Example of body text.

Heading Level 6 (<h6>)

Example of body text.

Note that Heading Level 1 (<h1>) is reserved for the site header.

Headings (with body text)

Example of body text with strong styling in it. Another example of body text with emphasis styling in it. Here is some body text with strongly emphasized text in it. (Bold, italic, and underlined text is deprecated in favor of defined styles.)

Anchors (links) are formatted as follows (these examples have “forced” styles so that they appear correctly): basic links; visited links; activated links; focused links; and hovered links. Here is a sample “live” link for comparison. Note that different brands of web browser may add a border or other elements around focused links, but this is independent of the styles used by this website.

Some text can be deleted, inserted, marked, or striked. ADA is an example of an abbreviation (note the dotted underline). Code text is rarely used, with sample, variable, and keyboard even less so. (tt is deprecated!). Inline quotes might look like this.—Citation, please!

This is an example of a blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu viverra dolor. Suspendisse rutrum luctus volutpat. In quis quam mi. Nam a aliquet velit. Pellentesque ornare nulla eget ante semper, et semper dui fringilla. Etiam posuere gravida massa id dapibus. Sed enim elit, varius vitae lectus ut, tincidunt efficitur lectus.

The bigly style class is used instead of <big> (which is deprecated), but small text makes frequent appearances. Footnotes and similar references often link via superscript text, whereas subscript text is not common.

Text can inlcude hyphens (-), en dashes (–), and em dashes (—). And then there are ellipses (…). So-called “fancy quotes” are used in most cases, but "straight quotes" make some appearances (especially inside their curly brethren). Straight apostrophes (') are rarely used, with the curved version (’) preferred; both are distinguished from marks used for feet (′) and inches (″).

Preformatted
   text
      is
         not
      common
   at
all.
Body Text Styles

A standard horizontal rule looks like this:


Some pages such as the Glossary use “separator” elements like this:

Horizontal Rules and Separators

Unordered lists look like this:

  • List Item
  • List Item
    • Nested List Item
    • Nested List Item
      • Another Nested List Item
      • Another Nested List Item
    • Nested List Item
  • List Item
Unordered Lists

Ordered lists look like this:

  1. List Item
  2. List Item
    1. Nested List Item
    2. Nested List Item
      1. Another Nested List Item
      2. Another Nested List Item
    3. Nested List Item
  3. List Item
Ordered Lists

Definition lists look like this:

Defined Term
Definition or descriptive text.
Defined Term
Definition or descriptive text.
Defined Term
Definition or descriptive text.
Definition Lists

Various form elements look like this (not all are used by this site):

Fieldset Legend (Standard)

Radio Buttons:


Checkboxes:


Fieldset Legend (Advanced)

 X

Fieldset Legend (Experimental)

 #ffaa07

Fieldset Legend (Buttons)

Link Button (“fakeButton”)

Form Elements