Skip to content

Sequential Element Images Lack Background and Blend Into Page #416

@JatsuAkaYashvant

Description

@JatsuAkaYashvant

Describe the bug

In Chapter 4: Circuit Elements Library, under the Sequential Elements section, some images (e.g., D-Flip Flop) do not have a background and have black-colored pins. These elements visually merge with the dark blue page background, making them hard to see and reducing accessibility and readability.

To Reproduce

Steps to reproduce the behavior:

  1. Go to Chapter 4: Circuit Elements Library[
  2. Navigate to the Sequential Elements section
  3. Look at the image for D-Flip Flop and others
  4. Notice how the pins blend into the background due to lack of contrast

Expected behavior

Images should be clearly visible against the background.This can be fixed by:

Replacing the current images with versions that have a light background

OR

Adding a background color (e.g., white) via CSS or container styling to ensure image contrast

Screenshots/GIFs

Image

Device Information [optional]:

  • OS: Windows
  • Browser: Brave
  • Version: 1.77.95

Additional context

This is an accessibility and UI/UX issue. A quick CSS fix would be to wrap the images in a container and apply a background color using:

.image-container {
background-color: #fff;
padding: 8px;
display: inline-block;
border-radius: 4px;
}

Are you working on this issue? (Yes/No)

No

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions