Winging It Live - OddContrast

content/blog/index.njk

@@ -29,6 +29,8 @@ eleventyComputed:
     and more with these articles, videos,
     podcasts, and case studies.
     {% endif %}
+eleventyImport:
+  collections: ["posts"]
 ---
 
 {% import 'post.macros.njk' as post %}

content/blog/wingingit/winging-it-09.md

@@ -0,0 +1,68 @@
+---
+title: Using New Color Formats
+episode: 9
+sponsors: true
+tags:
+  - Accessibility
+  - Color
+  - Design
+  - Figma
+  - OddTools
+author:
+  - james
+  - miriam
+  - stacy
+date: 2024-06-27
+length: 53 mins
+image:
+  src: winging-it/winging-it-9.jpg
+media:
+  - youtube: Lq4saw4Rqe0
+summary: |
+  Miriam Suzanne, Stacy Kvernmo, and James Stuckey Weber
+  demo how to use new color formats with
+  [OddContrast.com](https://www.oddcontrast.com/),
+  a color tool for previewing, accessibility testing,
+  and selecting the format/space.
+---
+
+{% import "embed.macros.njk" as embed %}
+{% import "utility.macros.njk" as utility %}
+
+{{ embed.figure(
+  data=media
+) }}
+
+{{ utility.main_action(
+  'Subscribe to Channel »',
+  subscribe_url
+) }}
+
+## What we cover:
+
+- What is OddContrast?
+- Why we made OddContrast
+- What are the new color formats, and why use them?
+- What does "in gamut" mean?
+- Specifying fallbacks
+- Why care about contrast?
+- How does alpha impact contrast?
+
+## Links:
+
+- [OddContrast.com](https://www.oddcontrast.com/)
+- [OddContrast GitHub](https://github.com/oddbird/oddcontrast/issues)
+- [Color.js](https://colorjs.io/)
+- [W3C CSS Color Module Level 4](https://www.w3.org/TR/css-color-4/)
+- [Okay, Color Spaces](https://ericportis.com/posts/2024/okay-color-spaces/)
+- [Palette Juicer](https://keyboarddanni.github.io/palettejuicer/)
+- [Oklch.com](https://oklch.com)
+- [Gamut Mapping Gradients](https://apps.colorjs.io/gamut-mapping/gradients?from=oklch%2890%25+.4+250%29&to=oklch%2840%25+.1+20%29)
+
+## Demos:
+
+- [Color Clipping v Mapping CodePen](https://codepen.io/miriamsuzanne/pen/rNRoBXO?editors=1010)
+
+## Support OddContrast:
+
+- [OddBird Open Source on Open Collective](https://opencollective.com/oddbird-open-source)

content/tools/oddcontrast.md

@@ -7,6 +7,8 @@ logo: oddcontrast
 image:
   position: top
   src: projects/contrast-hero.jpg
+media:
+  - youtube: Lq4saw4Rqe0
 oss: owner
 author: oddbird
 action:
@@ -27,6 +29,10 @@ summary: |
 
 {% import 'embed.macros.njk' as embed %}
 
+{{ embed.figure(
+  data=media
+) }}
+
 ## Support for Newer Color Formats and Spaces
 
 In additional to Oklch, Oklab, and P3, OddContrast also includes hex, HSL, Lab,