.callout{padding:12px 16px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.6}
.callout strong{display:block;margin-bottom:6px}
.callout p{margin:4px 0 0}
.callout-placeholder{background:#F9FAFB;border:1px dashed #D1D5DB;border-left:4px solid #9CA3AF}
.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
@media(max-width:640px){.do-dont{grid-template-columns:1fr}}
.do{border-left:4px solid #1A7F5A;padding:12px 16px;background:#F0FDF4;border-radius:0 4px 4px 0}
.dont{border-left:4px solid #B91C1C;padding:12px 16px;background:#FFF5F5;border-radius:0 4px 4px 0}
.do-dont-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.do-label{color:#1A7F5A}
.dont-label{color:#B91C1C}
.do-dont-content p{margin:0;font-size:13px;line-height:1.6}
.spec-table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0}
.spec-table th{text-align:left;padding:8px 12px;background:#F3F4F6;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#6B7280;border-bottom:2px solid #E5E7EB}
.spec-table td{padding:8px 12px;border-bottom:1px solid #F3F4F6;vertical-align:top;line-height:1.5}
.prototype-note{font-size:12px;font-style:italic;color:#6B7280;border-left:2px solid #D1D5DB;padding-left:10px;margin:6px 0 12px}
.external-ref-placeholder{font-size:12px;color:#9CA3AF;font-style:italic}
.related-pages{margin-top:32px;padding-top:20px;border-top:1px solid #E5E7EB}
.related-pages h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6B7280;margin-bottom:10px}

# Colour and contrast

All text, icons, and interactive components in Petrel must meet WCAG 2.2 Level AA colour contrast requirements.
## Purpose

Adequate colour contrast ensures that users with low vision, colour vision deficiencies, or those working in bright ambient light can read text and identify interactive controls. This is a fundamental accessibility requirement that affects all visual elements in Petrel.

## Who uses this guidance

UI designers specifying colour values, developers implementing custom controls, and reviewers validating delivered features.

## Core requirements

Element type
Minimum contrast ratio
WCAG criterion
Normal text (below 18pt or 14pt bold)
4.5:1
1.4.3 Contrast (Minimum)
Large text (18pt+ or 14pt+ bold)
3:1
1.4.3 Contrast (Minimum)
UI components and states (borders, icons)
3:1
1.4.11 Non-text Contrast
Disabled controls
No requirement
1.4.3 (exception)
Decorative images
No requirement
1.4.3 (exception)
Prototype value. Confirm specific token values with the Petrel design and development team.
## Rationale

Approximately 8% of males and 0.5% of females have colour vision deficiencies. In a Petrel user base of thousands, this represents a significant population. Users in offshore and field environments often work in bright sunlight on laptop screens, reducing effective contrast further. The WCAG contrast ratios are the minimum threshold — not the target.

## Do and Don't

DO
Check the contrast ratio of every new colour combination using a tool such as the WebAIM Contrast Checker or the Windows Colour Contrast Analyser. Measure against the actual background colour used in the WPF theme.
DON'T
Don't rely on colour alone to communicate status, error, or selection state. Every participant in the SNTC Findability Study, June 2026, failed to notice colour-only status indicators in Petrel dialogs.
## Petrel example

Petrel example placeholder
Screenshots of compliant and non-compliant contrast in Petrel dialogs will be added here. Contact the SNTC UX team to contribute examples.
## Charts and data visualizations

Charts in Petrel (seismic displays, well logs, cross-plots) require special treatment. The 3:1 non-text contrast requirement applies to meaningful graphical elements, but the interaction between multiple data series requires additional consideration. Each data series must be distinguishable by more than colour — use pattern, shape, or label in addition to colour differentiation.

## Testing guidance

Test colour contrast at each of the following points in the development cycle:

- During design, using the Figma Colour Contrast plugin or equivalent
- During development, using the Windows Colour Contrast Analyser on the running application
- During acceptance testing, as part of the accessibility checklist


Test in both the default Petrel theme and any high-contrast Windows mode (Windows High Contrast Black and Windows High Contrast White).

## External references

Microsoft Accessibility documentation reference — to be linked by SNTC UX team
### Related pages

Color & Contrast
— Approved colour tokens for Petrel
Keyboard and focus
— Focus indicator contrast requirements
Notifications
— Status without colour dependence
Accessibility testing
— Tools and checklists