Style: High Contrast

---
name: style-high-contrast
description: High Contrast accessibility style tokens and row template for the list-styling skill. Maximum contrast, large text, thick borders, alternating dark/light band rows, heavy left accent bar. Layout uses wide horizontal bands with large bold text for maximum readability. Use when the user says "high contrast," "accessible," "WCAG," "large text," or similar.
---

# High Contrast — Style Tokens + Row Template

Maximum readability. Thick borders. Large text. Each row is a wide horizontal band with alternating backgrounds and a heavy left accent bar color-coded to the status. Everything is designed to be read at arm's length.

**Layout philosophy: Wide bands with heavy accents.** No card separation — rows are wide horizontal bands with alternating light/dark backgrounds. A thick (6px) left accent bar marks each row's status. All text is oversized. Progress percentage is the largest element. Optimized for accessibility, not aesthetics.

## Badge Tokens

- padding: `6px 16px`
- border-radius: `4px`
- font-size: `14px`
- font-weight: `700`
- text-transform: `uppercase`

### status_colors

| Value | bg | text | border |
|---|---|---|---|
| Draft | `#1f2937` | `#ffffff` | `2px solid #1f2937` |
| In Review | `#1d4ed8` | `#ffffff` | `2px solid #1d4ed8` |
| Revising | `#b45309` | `#ffffff` | `2px solid #b45309` |
| Approved | `#047857` | `#ffffff` | `2px solid #047857` |
| Published | `#065f46` | `#ffffff` | `2px solid #065f46` |
| _fallback | `#374151` | `#ffffff` | `2px solid #374151` |

## Row Card Tokens

- row_border: `none` (bands, not cards)
- row_background_even: `#ffffff`
- row_background_odd: `#f8fafc`
- accent_width: `6px` (thick left accent bar)
- row_padding: `18px 24px`
- row_margin: `0px` (no gaps — continuous bands)
- overdue_background: `#fef2f2` (light red wash over entire row)

---

## Row Template Layout

Wide horizontal band. No card borders. Thick left accent. Alternating backgrounds.

```
┃█████ API Guide.docx         [IN REVIEW]       72%    5/15/2026         ┃
┃█████ ████████████████████████████████████░░░░░░░░░░░░░░               ┃
┃                                                          (white bg)    ┃
┃█████ Architecture Overview   [DRAFT]           35%    5/30/2026        ┃
┃█████ ███████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░                      ┃
┃                                                          (gray bg)     ┃
  ↑ 6px left accent in status color. Overdue rows get pink wash.
```

## rowFormatter JSON

**Adapt before applying.** The column names below (`[$Status]`, `[$Progress]`, `[$Deadline]`) are example placeholders — replace them with the actual internal column names from the user's list. Also update every status value string ('Draft', 'In Review', 'Revising', etc.) to match the user's actual Choice values. Follow list-styling Step 3.

```json
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
  "hideSelection": false,
  "hideColumnHeaders": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "gap": "10px",
      "padding": "18px 24px",
      "border-left": "=if([$Status] == 'Draft', '6px solid #1f2937', if([$Status] == 'In Review', '6px solid #1d4ed8', if([$Status] == 'Revising', '6px solid #b45309', if([$Status] == 'Approved', '6px solid #047857', if([$Status] == 'Published', '6px solid #065f46', '6px solid #374151')))))",
      "background-color": "=if([$Deadline] < @now, '#fef2f2', if(@rowIndex % 2 == 0, '#ffffff', '#f8fafc'))",
      "border-bottom": "1px solid #d1d5db",
      "min-height": "80px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "align-items": "center",
          "gap": "20px",
          "flex-wrap": "wrap"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex": "2",
              "font-size": "16px",
              "font-weight": "700",
              "color": "#1f2937"
            },
            "txtContent": "=if([$FileLeafRef] == '', [$Title], [$FileLeafRef])"
          },
          {
            "elmType": "span",
            "txtContent": "[$Status]",
            "style": {
              "display": "inline-block",
              "padding": "6px 16px",
              "border-radius": "4px",
              "font-size": "14px",
              "font-weight": "700",
              "text-transform": "uppercase",
              "white-space": "nowrap",
              "color": "#ffffff",
              "background-color": "=if([$Status] == 'Draft', '#1f2937', if([$Status] == 'In Review', '#1d4ed8', if([$Status] == 'Revising', '#b45309', if([$Status] == 'Approved', '#047857', if([$Status] == 'Published', '#065f46', '#374151')))))",
              "border": "=if([$Status] == 'Draft', '2px solid #1f2937', if([$Status] == 'In Review', '2px solid #1d4ed8', if([$Status] == 'Revising', '2px solid #b45309', if([$Status] == 'Approved', '2px solid #047857', if([$Status] == 'Published', '2px solid #065f46', '2px solid #374151')))))"
            }
          },
          {
            "elmType": "span",
            "txtContent": "=toString([$Progress]) + '%'",
            "style": {
              "font-size": "24px",
              "font-weight": "800",
              "color": "#1f2937",
              "min-width": "60px",
              "text-align": "right"
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "align-items": "center",
              "gap": "6px"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "📅",
                "style": { "font-size": "15px" }
              },
              {
                "elmType": "span",
                "txtContent": "=toLocaleDateString([$Deadline])",
                "style": {
                  "font-size": "15px",
                  "font-weight": "=if([$Deadline] < @now, '800', '500')",
                  "color": "=if([$Deadline] < @now, '#b91c1c', '#1f2937')"
                }
              },
              {
                "elmType": "span",
                "txtContent": "=if([$Deadline] < @now, '⚠ OVERDUE', '')",
                "style": {
                  "font-size": "14px",
                  "font-weight": "800",
                  "color": "#b91c1c"
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "width": "100%",
          "height": "12px",
          "background-color": "#d1d5db",
          "border": "2px solid #1f2937",
          "border-radius": "2px",
          "overflow": "hidden"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "width": "=toString([$Progress]) + '%'",
              "height": "100%",
              "border-radius": "0px",
              "background-color": "=if([$Progress] < 30, '#b91c1c', if([$Progress] < 66, '#b45309', '#047857'))"
            }
          }
        ]
      }
    ]
  }
}
```

---

## Checklist — "I Can't Believe That's SharePoint"

- ✅ Full rowFormatter — NOT default column grid
- ✅ Wide horizontal BANDS — not cards (no card separation, no rounded corners, no shadow)
- ✅ 6px thick left accent bar in status color
- ✅ Alternating row backgrounds (white / light gray) — even vs odd
- ✅ Overdue rows get full pink wash background
- ✅ ALL text is oversized (14-24px) — readable at arm's length
- ✅ Progress percentage is 24px and bold — second-largest element
- ✅ 12px thick progress bar with dark border — chunkiest of all styles
- ✅ Dark, high-contrast colors (WCAG AAA)
- ✅ 📅 icon + large date (15px)
- ✅ Different from ALL others: bands vs cards, no shadows, no rounded corners, maximum density

---

## Responsive / mobile

- **≤ 600 px**: collapse the band by reducing the left-accent bar from 8 px to 4 px and stacking the title above the chips. Keep band height ≥ 64 px so the row is still a comfortable touch target.
- **Never reduce any text below 16 px on mobile.** This style trades density for legibility; shrinking text defeats the purpose. If the layout doesn't fit, drop fields, do not shrink type.
- **≤ 480 px**: hide the progress label ("Progress") — the numeral and the bar are self-explanatory.
- **Touch targets**: rows are 64 px tall and clickable; this is already mobile-friendly by default.

## Implementation notes

### WCAG contrast claim (pinned)

The shipped token pairs were verified at WebAIM at design time:

| Pair | Use | Ratio | WCAG |
|---|---|---|---|
| `#0F172A` BG + `#FFFFFF` text | Dark band background + body text | ≈ 17.4 : 1 | **AAA** (normal & large) |
| `#F8FAFC` BG + `#0F172A` text | Light band background + body text | ≈ 16.8 : 1 | **AAA** (normal & large) |
| `#0078D4` accent on `#F8FAFC` | Accent text / left bar on light | ≈ 4.6 : 1 | **AA** (large text only) |
| `#DC2626` overdue on `#F8FAFC` | Overdue red on light | ≈ 5.9 : 1 | **AA** (normal) |
| `#FFFFFF` on `#DC2626` | Overdue badge text | ≈ 4.8 : 1 | **AA** (normal) |

If any of these tokens are re-skinned, **re-verify** the affected pairs in [WebAIM contrast checker](https://webaim.org/resources/contrastchecker/) before publishing. Never lower an existing AAA pair to AA without an explicit decision.