Select Color Pair: Color Pair 1 Color Pair 2 Color Pair 3 Color Pair 4 Color Pair 5 Dark Mode:

---

Background

The sets of color pairs follow the Web Content Accessibility Guidelines (WCAG) for text and background color combinations. These guidelines ensure that text is readable and accessible to a wide range of users.

The colors follow the WCAG guidelines up to September 2021 which specify a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 24pt bold).

Implementation

Conversion fom sRGB to linear color space must be performed when applying the colors to the model as the model assumes linear color space. Note that as the model is rendered the colors in the rendered image may not conform to the WCAG guidelines as lighting and shading may affect the contrast ratio.

The colors and parts of the html code were generated using ChatGPT. The basic prompts were:

• To provide a set of 5 colors which follow WCAG guidelines
• Convert this to a JSON representation
• Create a html page with controls to choose color pairs
• Add in another set of 5 colors to have a "light" vs "dark" mode option

To this a 3d viewer using the model-viewer web component was added. The 3d logo was created in Illustrator which was then exported to Blender and then to glTF.

Note: For testing a local server via Python

python -m http.server