Snap colors

To ensure an inclusive and accessible experience for all users—especially those with color vision deficiencies—the following key updates are done to the Snap's color palette.

  • Stronger Visual Indicators

    • Border outlines added: Each status now includes distinct border outlines. This provides secondary visual encoding, so you don’t have to rely on color alone to interpret status cues.

    • The selected Snaps now display a distinct inner border with a slight shadow to indicate active selection.

    • The validated output now takes the shape of the Snap type.

    Improved Contrast Across the UI

    • System colors refreshed: All UI colors have been updated to meet WCAG accessibility standards. These changes enhance readability and ensure better visibility for everyone.

    The table below compares the latest updated Snap components with their earlier version:
    Selected Snaps: The border for the selected Snap has a thin inner border with a slight shadow in the new version. Old


    		New


    Validated pipeline: The validated data output takes the shape of the peg (output type).

    • Binary type: Rhombus

    • Document type: Semi-circle

    		 Old


    New


    For more detailed information on individual Snaps refer to Connecting Snaps.
    Non-validated pipeline: The inner peg border is slim and light in color in the new version. Old


    New


    Executed pipeline: The background color and borders are slim and light in color in the new version. Old


    New
    Failed pipeline: The background color of the failed pipelines remains the same; however, the external red border is slim and light in color in the new version. Old


    New


    Disconnected Snaps: The disconnected Snaps are marked with a light green thin border in the new version. Old


    New


    The table below compares the Snap components with the legacy version:
    Disconnected Snaps. Old
    New
    For more detailed information on individual Snaps refer to Connecting Snaps.
    Background color for pipelines that are not validated. Old
    New
    Background and outline color for validated pipelines Old
    New
    Background and outline color for executed pipelines Old
    New
    Background and outline color for failed pipeline executions Old
    New
    Pipeline started Old
    New
    Suspended pipeline execution New
    Distinct Snap outlines for selected state Old New