Evaluating 2024 Euro Cup and COPA America Cup Jersey Shade Accessibility

This previous weekend, round 30 million individuals tuned in to look at the 2024 Euro Cup and COPA America Cup finals. The 2 tournaments hosted the best gamers on this planet for a month of aggressive and fast-paced soccer (or soccer), drawing in followers from everywhere in the world watching from their telephones, laptops, and TV screens.

Amongst these followers are doubtless these with visible impairments who profit tremendously from excessive distinction colours used the place doable. For instance, jerseys which have excessive color contrasts are extra readable and thus accessible to a wider viewers.  

Whereas we all know which international locations went dwelling with a trophy for being one of the best on this planet at their sport, do we all know which nation has probably the most visually accessible jerseys? We will use Roboflow to seek out out! Right here’s how we are able to try this:

1. Use an occasion segmentation mannequin to detect jerseys in a soccer recreation;
2. Add information to Roboflow so we are able to annotate the jerseys in our dataset;
3. Prepare our mannequin utilizing Roboflow Prepare;
4. Use clustering to establish the colours in our jerseys, and;
5. Verify if the distinction of the jersey quantity in opposition to the jersey coloration passes WCAG 2.1 coloration accessibility necessities

Step #1: Collect our information

We’re going to use laptop imaginative and prescient to inform us if the distinction between a jersey’s quantity and the jersey’s coloration meets the Net Content material Accessibility Pointers (WCAG) and necessities for coloration distinction. To do this, we’re going to seize some movies of soccer gamers and drop that hyperlink into Roboflow.

From this step, we are going to get the frames from our movies that we are able to use to annotate.

Step #2: Annotate the jersey photos 

Subsequent, we’re going to annotate our information so our mannequin can establish what a jersey is and the place it’s positioned in our frames. We will use the “Good Polygon” instrument within the Roboflow Annotate net interface to assist us shortly draw annotations for the shapes of our jerseys. For our first model, we’ll purpose to have ~50 frames annotated.

Step #3: Prepare a jersey recognition  mannequin

After now we have annotated  our photos, we are able to transfer on to coaching our mannequin.

Step #4: Use clustering to establish the colours in our jerseys

With a educated mannequin that may phase jerseys from a picture, we are able to now use clustering to establish the colours in our jerseys. We will comply with one other Roboflow weblog put up to take action.

After following the steps within the weblog put up, our code ought to look one thing like this:

import numpy as np
import supervision as sv
from PIL import Picture
from roboflow import Roboflow
from sklearn.cluster import KMeans rf = Roboflow(api_key="mS0usHY07JhvTGERNl3q") challenge = rf.workspace().challenge("jersey-contrast")
mannequin = challenge.model(2).mannequin courses = "jersey"
image_name = "instance.jpg" inference_results = mannequin.predict(image_name).json()
outcomes = sv.Detections.from_inference(inference_results) picture = Picture.open(image_name)
picture = np.array(picture)
mask_annotator = sv.MaskAnnotator()
picture[results.mask[0] == 0] = Zero pixels = picture.reshape((-1, 3))
clt = KMeans(n_clusters=3)
clt.match(pixels) facilities = clt.cluster_centers_
rgb = [[int(i) for i in center] for heart in facilities]
rgb = [i for i in rgb if sum(i) > 0]
print(rgb) 

On this code, we:

1. Load our Roboflow mannequin;
2. Specify the category our mannequin has been educated to establish (jersey);
3. Run inference on our mannequin utilizing Roboflow Inference;
4. Retrieve the primary detection from the mannequin;
5. Substitute all pixels outdoors the primary detection area with black;
6. Apply Okay-Means clustering to establish the three most dominant colours, and;
7. Take away the black pixels that we utilized earlier.

This code will print the background (jersey) and foreground (jersey quantity) colours of the jersey in our “instance.jpg” picture in RGB.

Step #5: Verify coloration distinction

Subsequent, we are going to use the `color-contrast` Python library to test if the distinction of the jersey quantity in opposition to the jersey coloration passes WCAG2.1 necessities. To take action, we are going to first convert our RGB to HEX values after which outline our background (jersey) coloration:

def rgb2hex(c): return "#{:02x}{:02x}{:02x}".format(c[0], c[1], c[2])
bg = Shade(rgb2hex(rgb[1]))

After, we are going to run the distinction checker to see if our jersey is WCAG2.1 compliant:

print("Staff :" + image_name)
print("Jersey Colours: " + str(rgb)) check_contrast_AA = check_contrast(rgb2hex(rgb[0]), bg, degree=AccessibilityLevel.AA)
check_contrast_AAA = check_contrast(rgb2hex(rgb[0]), bg, degree=AccessibilityLevel.AA)
print("WCAG Stage AA Compliant? " +str(check_contrast_AA))
print("WCAG Stage AAA Compliant? " + str(check_contrast_AAA)) 

Step #6: Testing the script 

Let’s run our Python script to see if our 2024 Euros and COPA America Cup winners have accessible jerseys:

Staff Spain:

Location of the jersey detected by our system:

Outcomes:

Staff Argentina:

Location of the jersey detected by our system:

Outcomes:

As we are able to see, the jerseys for Staff Spain and Staff Argentina each don’t go WCAG2.1 necessities for coloration distinction.

Conclusion

On this information, we demonstrated how we are able to use Roboflow and occasion segmentation to investigate and evaluate the colours of jerseys. We then used this data to find out if the distinction between the jersey coloration and the jersey quantity coloration are WCAG2.1 compliant. 

With the 2024 Summer time Olympics simply across the nook, we are able to proceed to assume on how Roboflow could make an affect on enhancing accessibility in sports activities broadcasting.